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

import { LengthMetrics } from '@kit.ArkUI'import web_webview from '@ohos.web.webview';
@Entry@Componentexport 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%')  }}