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

egzosn

于 2024-09-29 17:27:40 发布

阅读量403

点赞数 7

本文链接：https://blog.csdn.net/cnzzs/article/details/142646980

版权

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

使用的系统组件：

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：拦截内部跳转、重定向等链接。

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

【代码示例】

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%')
  }
}