【HarmonyOS】公司鸿蒙项目收工总结之《组件》

在项目中使用的系统组件和属性总结如下：

使用的系统组件：

1.Column：纵向布局容器，用于垂直排列子组件。
2.Row：横向布局容器，用于水平排列子组件。
3.Stack：层叠布局容器，用于将子组件层叠显示。
4.Flex：弹性布局容器，用于创建灵活的布局。
5.Scroll：滚动布局容器，用于实现滚动效果。
6.Image：图片组件，用于显示图片内容。
7.Text：文本组件，用于显示文本内容。
8.LoadingProgress：加载指示器组件，用于展示加载过程中的指示器。
9.SaveButton：保存按钮组件，用于保存图片到相册。
10.Swiper：轮播图组件，用于创建轮播图效果。
11.TextInput：输入框组件，用于接收用户输入。
12.Search：搜索条组件，用于实现搜索功能。
13.Web：网页加载组件，用于加载网页内容。

使用的属性记录：

* width：设置容器或组件的宽度。
* height：设置容器或组件的高度。
* backgroundColor：设置容器或组件的背景色。
* padding：设置容器或组件的内边距。
* margin：设置容器或组件的外边距。
* visibility：根据属性值控制容器或组件的显示或隐藏。
* onClick：设置点击事件处理器。
* onAreaChange：监听容器尺寸变化。
* linearGradient：设置容器或组件的背景为线性渐变色。
* shadow：设置容器的阴影效果。
* align：设置内部组件的位置显示方式。
* constraintSize：设置容器或组件的最大宽度或高度。
* transition：为容器或组件添加过渡动画效果。
* maxLines：设置文本组件最多显示的行数。
* onChange：监听输入内容的变化。
* indicator：设置是否显示轮播指示点。
* loop：设置是否开启轮播图的循环播放。
* src：设置网页加载组件的源地址。
* javaScriptProxy：注册JS Bridge，用于与H5页面进行数据通信。
* onLoadIntercept：拦截内部跳转、重定向等链接。

以上是项目中使用的系统组件和属性记录，可以作为学习和开发项目时的参考。

【代码示例】

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

import { LengthMetrics } from '@kit.ArkUI'
import web_webview from '@ohos.web.webview';
 
@Entry
@Component
export struct Page13 {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State inviteQrCodeID: string = "inviteQrCodeID"
  @State isShow: boolean = true
  @State searchValue: string = ""
  scripts: Array<ScriptItem> = [
  // { script: this.localStorage, scriptRules: ["*"] }
  ];
 
  build() {
    Column() {
      Column({ space: 10 }) { // 纵向布局容器
        // ForEach() 可配合使用以动态渲染子组件
      }
      .width('90%') // 设置容器宽度为父容器的90%
      .height('100%') // 设置容器高度为父容器的100%
      .backgroundColor("#ffffff") // 设置容器背景色为白色
      .layoutWeight(1) // 占据父容器的剩余空间
      .alignItems(HorizontalAlign.Center) // 水平居中对齐
      .justifyContent(FlexAlign.Center) // 垂直居中对齐
      .align(Alignment.TopStart) // 内容对齐方式为顶部左端
      .borderWidth({ bottom: 1 }) // 设置底部边框宽度为1
      .borderColor("#E3E3E3") // 设置边框颜色
      .padding({ left: '20lpx', right: '20lpx' }) // 设置左右内边距为20逻辑像素
      .margin({ top: '44lpx' }) // 设置顶部外边距为44逻辑像素
      .visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据isShow属性控制容器的显示或隐藏
      .id(this.inviteQrCodeID) // 设置组件ID，方便后续截图保存到相册
      .flexGrow(1) // 当父布局为Flex时，占据父容器的剩余空间
      .gesture(LongPressGesture({ repeat: false })) // 长按手势监听，设置repeat为false表示长按时不会重复触发
      .onClick(() => { // 点击事件处理器
        // 处理点击逻辑
      })
 
 
      Row() { // 横向布局容器
        // ForEach() 可用于动态渲染子组件列表
      }
      .width('100%') // 设置容器宽度为父容器的100%
      .height('192lpx') // 设置容器高度为192逻辑像素
      .justifyContent(FlexAlign.End) // 子元素在主轴方向上靠右对齐
      .backgroundColor(Color.White) // 设置容器背景色为白色
      .padding({ left: '28lpx', right: '28lpx' }) // 设置左右内边距为28逻辑像素
      .margin({ top: '39lpx' }) // 设置顶部外边距为39逻辑像素
      .transition(TransitionEffect.OPACITY.animation({ duration: 200 })) // 添加透明度过渡动画，持续时间为200毫秒
      .visibility(this.isShow ? Visibility.None : Visibility.Visible) // 根据 `this.isShow` 属性来决定是否显示该容器
      .onClick(() => { // 点击事件处理器
        // 执行点击操作的逻辑
      })
      .onAreaChange((previousArea: Area, currentArea: Area) => { // 监听容器尺寸变化
        // 在容器尺寸发生变化时执行相关逻辑
      })
 
      Stack({ alignContent: Alignment.Bottom }) { // 创建一个层叠布局容器，并设置内容对其方式为底部对齐
      }
      .width(180) // 设置容器宽度为180逻辑像素
      .height(180) // 设置容器高度为180逻辑像素
      .backgroundColor(0x88000000) // 设置容器背景色为半透明黑色（RGB: #000000，Alpha: 0.53）
      .borderRadius(10) // 设置容器的圆角半径为10逻辑像素
      .margin({ left: '25lpx', top: '6lpx', right: '25lpx' }) // 设置容器的左、顶和右外边距分别为25和6逻辑像素
      .align(Alignment.Top) // 设置内部组件的位置显示方式为顶部对齐
      .visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 属性值来控制容器的显示或隐藏
      .onClick(() => {
      }) // 定义点击事件处理函数
      .linearGradient({
        // 设置容器背景色为线性渐变色，注意与 `.backgroundColor` 互斥
        angle: 90, // 渐变角度为90度
        colors: [// 渐变颜色配置
          [0xFF0000, 0.0], // 红色，位置0%
          [0xFFFF00, 0.2], // 黄色，位置20%
          [0x00FF00, 0.4], // 绿色，位置40%
          [0x00FFFF, 0.6], // 青绿色，位置60%
          [0x0000FF, 0.8], // 蓝色，位置80%
          [0xFF00FF, 1.0]// 紫色，位置100%
        ]
      })
      .shadow({
        // 设置容器的阴影效果
        radius: 20, // 阴影模糊半径为20逻辑像素
        offsetY: 25, // 阴影垂直偏移量为25逻辑像素
        offsetX: 0, // 阴影水平偏移量为0逻辑像素
        color: "#bfbfbf" // 阴影颜色为浅灰色
      })
 
 
      Flex({ wrap: FlexWrap.Wrap }) { // 创建一个允许换行的弹性布局容器
        // ForEach 通常用于内部动态渲染子组件列表
      }
      .width('100%') // 设置容器宽度为父容器的100%
      .height('88lpx') // 设置容器高度为88逻辑像素
      .margin({ top: '20lpx', bottom: '30lpx' }) // 设置容器的顶部和底部外边距分别为20和30逻辑像素
      .borderWidth({ top: 1 }) // 设置容器顶部边框宽度为1逻辑像素
      .borderColor("#cccccc") // 设置容器边框颜色为浅灰色
      .visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 属性值来控制容器的显示或隐藏
 
 
      Scroll() { // 创建一个滚动布局容器
        // 通常内部配合 Row() 或 Column() 使用以实现滚动效果
      }
      .width('100%') // 设置容器宽度为父容器的100%
      .layoutWeight(1) // 占据父容器的剩余空间
      .scrollable(ScrollDirection.Horizontal) // 设置滚动方向为水平
      .scrollBar(BarState.Off) // 关闭滚动条显示
      .borderWidth({ bottom: 1 }) // 设置底部边框宽度为1逻辑像素
      .borderColor("#e3e3e3") // 设置边框颜色
      .align(Alignment.Start) // 设置内部组件的位置显示方式为起始位置对齐
      .visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 属性值来控制容器的显示或隐藏
 
      Image($r('app.media.app_icon'))// 图片组件
        .width('120lpx')// 设置图片宽度为120逻辑像素
        .height('120lpx')// 设置图片高度为120逻辑像素
        .padding('10lpx')// 设置图片的内边距为10逻辑像素
        .margin({ top: '25lpx' })// 设置图片的顶部外边距为25逻辑像素
        .draggable(false)// 设置图片不可拖动，默认情况下不设置时可能会受外层长按手势影响
        .objectFit(ImageFit.Fill)// 设置图片显示方式为填充，可能会导致图片变形
        .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)// 根据 `this.isShow` 属性值来控制图片的显示或隐藏
        .alt($r('app.media.app_icon'))// 设置图片加载失败时的占位图
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])// 使图片在系统安全区域内扩展，避免被状态栏遮挡
        .onClick(() => { // 点击事件处理器
          // 处理点击逻辑
        })
 
      Text() { // 文本组件，可结合 ForEach 和 Span 使用
        ForEach(["a", "b"], (item: string, index: number) => { // 使用 ForEach 循环遍历数组 ["a", "b"]
          Span(item)// 创建一个 Span 子组件，并传入当前项作为文本内容
            .fontColor("#FF1919")// 设置 Span 组件的文字颜色为红色
            .fontSize('24lpx')// 设置 Span 组件的字体大小为24逻辑像素
            .onClick(() => {
            }) // 设置 Span 组件的点击事件处理器
        })
      }
      .width('100%') // 设置 Text 组件的宽度为100%，即填充其父容器的宽度
      .height('120lpx') // 设置 Text 组件的高度为120逻辑像素
      .textAlign(TextAlign.Center) // 设置 Text 组件内的文本水平居中对齐
      .fontColor("#2E2E2E") // 设置 Text 组件内的文本颜色为深灰色
      .fontSize('36lpx') // 设置 Text 组件内的字体大小为36逻辑像素
      .backgroundColor("#F9F9F9") // 设置 Text 组件的背景色为浅灰色
      .padding(20) // 设置 Text 组件的内边距为20逻辑像素
      .margin({ bottom: '44lpx' }) // 设置 Text 组件的底部外边距为44逻辑像素
      .lineHeight('60lpx') // 设置 Text 组件内文本的行间距（行高）为60逻辑像素
      .lineSpacing(LengthMetrics.lpx(15)) // 设置 Text 组件内文本行与行之间的实际空白距离为15逻辑像素
      .borderRadius(8) // 设置 Text 组件的圆角半径为8逻辑像素
      .borderWidth('1lpx') // 设置 Text 组件的边框宽度为1逻辑像素
      .borderColor("#bbbbbb") // 设置 Text 组件的边框颜色为浅灰色
      .borderStyle(BorderStyle.Solid) // 设置 Text 组件的边框样式为实线
      .visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 的值来决定 Text 组件是否可见
      .constraintSize({ maxWidth: '80%' }) // 设置 Text 组件的最大宽度为其父容器宽度的80%
      .layoutWeight(1) // 设置 Text 组件在弹性布局中的权重为1，意味着它会占据剩余的空间
      .transition(TransitionEffect.OPACITY.animation({ duration: 200 })) // 为 Text 组件添加一个持续200毫秒的透明度过渡动画
      .maxLines(2) // 设置 Text 组件最多显示两行文本
      .onClick(() => { // 设置 Text 组件的点击事件处理器
        // 在此处添加点击事件的具体逻辑
      })
      .onAreaChange((previousArea: Area, currentArea: Area) => { // 监听 Text 组件的尺寸变化
        // 在此处添加尺寸变化时的具体逻辑
      })
      .linearGradient({
        // 设置 Text 组件的背景为线性渐变色，注意与 `.backgroundColor` 不能同时使用
        angle: 90, // 设置渐变的角度为90度，从左到右
        colors: [// 设置渐变的颜色配置数组
          [0xFF0000, 0.0], // 红色，位于渐变起始点（0%）
          [0xFFFF00, 0.2], // 黄色，位于渐变的20%位置
          [0x00FF00, 0.4], // 绿色，位于渐变的40%位置
          [0x00FFFF, 0.6], // 青绿色，位于渐变的60%位置
          [0x0000FF, 0.8], // 蓝色，位于渐变的80%位置
          [0xFF00FF, 1.0]// 紫色，位于渐变终点（100%）
        ]
      })
 
      LoadingProgress()// 创建一个加载指示器组件，通常用于页面加载过程中展示
        .color(Color.White)// 设置加载指示器的颜色为白色
        .width(100)// 设置加载指示器的宽度为100单位
        .height(100) // 设置加载指示器的高度为100单位
 
      SaveButton()// 用户点击此按钮可保存图片到相册
        .onClick(() => {
        }) // 设置点击事件处理器
 
 
      Swiper() { // 创建一个轮播图组件，通常内部结合 ForEach 使用
      }
      .indicator(false) // 设置是否显示轮播指示点
      .loop(false) // 设置是否开启轮播图的循环播放
 
      TextInput({ placeholder: '请输入邀请码' })// 创建一个输入框，带有提示信息
        .width('540lpx')// 设置输入框宽度为540逻辑像素
        .height('76lpx')// 设置输入框高度为76逻辑像素
        .placeholderColor("#CBCBCB")// 设置提示信息文字颜色为浅灰色
        .maxLength(6)// 设置输入框最多可输入的字符长度为6
        .fontColor("#2E2E2E")// 设置输入内容的颜色为深灰色
        .fontSize('36lpx')// 设置输入框内字体大小为36逻辑像素
        .padding({ left: 0 })// 设置输入框左侧内边距为0逻辑像素
        .margin({ left: '105lpx', top: '28lpx' })// 设置输入框左侧和顶部的外边距分别为105和28逻辑像素
        .borderRadius(0)// 设置输入框圆角为0，即直角
        .backgroundColor("#ffffff")// 设置输入框背景色为白色
        .inputFilter('^[0-9a-zA-Z]*$')// 设置输入过滤规则，仅允许数字和字母输入
        .borderWidth({ bottom: 1 })// 设置输入框底部边框宽度为1逻辑像素
        .borderColor("#CBCBCB")// 设置输入框边框颜色为浅灰色
        .type(InputType.PhoneNumber)// 设置输入类型为电话号码
        .caretColor('#FF1919')// 设置输入框光标颜色为红色
        .onChange((value: string) => {
        }) // 监听输入内容的变化
 
 
      Search({ value: $$this.searchValue, placeholder: '搜索当前列表显示的单位' })// 创建一个搜索条组件，并设置初始值和提示信息
        .layoutWeight(1)// 在弹性布局中占据剩余空间
        .backgroundColor(Color.Transparent)// 设置搜索条背景为透明
        .fontColor("#2E2E2E")// 设置搜索内容的颜色为深灰色
        .placeholderColor("#CBCBCB")// 设置提示信息文字颜色为浅灰色
        .borderRadius('32lpx')// 设置搜索条的圆角半径为32逻辑像素
        .textFont({ size: '28lpx' })// 设置搜索条内字体大小为28逻辑像素
        .onChange((value: string) => {
        }) // 监听输入内容的变化
 
      Web({ src: "https://xxx", controller: this.controller })// 创建一个加载网页的组件，并设置源地址和控制器
        .width('100%')// 设置组件宽度为100%，即填充其父容器宽度
        .height('100%')// 设置组件高度为100%，即填充其父容器高度
        .domStorageAccess(true)// 开启DOM Storage API权限，允许本地存储功能
        .javaScriptAccess(true)// 允许执行JavaScript脚本，默认允许执行
        .databaseAccess(true)// 开启数据库存储API权限，默认不开启
        .mixedMode(MixedMode.All)// 允许HTTP和HTTPS混合模式
        .fileAccess(true)// 开启应用文件系统的访问权限，默认已开启
        .imageAccess(true)// 允许自动加载图片资源，默认允许
        .geolocationAccess(true)// 开启地理位置权限，默认开启
        .onlineImageAccess(true)// 允许从网络加载图片资源，默认允许
        .mediaPlayGestureAccess(true)// 允许有声视频播放无需用户手动点击，默认需要用户点击
        .backgroundColor('#ffffff')// 设置组件背景色为白色
        .javaScriptOnDocumentStart(this.scripts)// 在文档开始加载前注入JavaScript脚本
        .javaScriptProxy({
          // 注册JS Bridge，用于与H5页面进行数据通信
          name: "xx", // 注册名称，注意避免使用关键字
          object: Object(),
          methodList: Object(),
          controller: this.controller,
        })
        .onLoadIntercept((event) => {
          return true
        })// 拦截内部跳转、重定向等链接
        .onControllerAttached(() => {
        })// 在网页加载前设置自定义UA
        .onPageEnd((e) => {
        })// 页面加载完成后，可以设置隐藏loading布局
        .onShowFileSelector((event) => {
          return true
        })// 网页请求拉起相机时，由系统调用返回用户选择的图片
        .onVisibleAreaChange([0.0, 1.0], () => {
        }) // 监听网页显示区域的变化
 
    }
    .height('100%')
    .width('100%')
  }
}