OpenHarmony - ArkUI(TS)声明式开发之故障轮播 原创 精华

作者：钟娟

前言

最近刚接触基于openHarmony开源框架的应用开发，特别是基于TS扩展的声明式开发。本文主要结合Harmony官网上的ETS相关组件及API实现日常开发中常见的故障循播效果，以此熟悉ETS下的一些基础组件的应用。

UI开发模式

效果演示

实现步骤

1. 新建项目

2. 页面布局

创建弹性Flex布局，使用Swiper容器组件，Text、Image基础组件。

  build() {
    Flex() { //弹性布局
      Swiper() { //滑动容器，提供切换子组件显示的能力
          Flex() {
            Image($r('app.media.ic_warn'))//图片组件，用来渲染展示图片。
            Text() //文本，用于呈现一段信息。
            Image($r('app.media.ic_arrow'))//图片资源放于resource文件夹下的media文件夹下
          }
      }
    }
  }

3. 以“.”链式调用的方式配置UI结构及其属性、事件等

   build() {
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //弹性布局
      Swiper() { //滑动容器，提供切换子组件显示的能力
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
          //图片组件，用来渲染展示图片
          Image($r('app.media.ic_warn'))
            .width(24)
            .height(24)
            .margin({ top: 12, left: 12, bottom: 12 })
            .objectFit(ImageFit.Fill)
          //文本，用于呈现一段信息
          Text('电量低，请及时充电！')
            .width('75%')
            .textOverflow({ overflow: TextOverflow.None })
            .fontSize(16)
            .fontColor(0xd94838)
            .fontWeight(FontWeight.Medium)
            .margin({ top: 14, left: 16, })
            .padding({ bottom: 15 })
          //图片资源放于resource文件夹下的media文件夹下
          Image($r('app.media.ic_arrow')).width(12)
            .height(24)
            .margin({ top: 12, right: 12, bottom: 12 })
            .objectFit(ImageFit.Fill)
        }
      }
      .margin({ top: 30, right: 12, left: 12, })
      .height(48)
      .borderRadius(16)
      .backgroundColor(0xfce3df)
      .index(1)
      .autoPlay(true)
      .interval(1000)
      .indicator(false)
      .loop(true)
      .duration(1500)
      .vertical(true)
      .disableSwipe(true)
    }
  }

Swiper相关属性

Image相关参数和属性

4. 赋初始值，完善逻辑，实现循环播放

使用ForEach循环遍历所有故障数据，结合if和弹窗组件，实现部分故障有相应解决方案提示框的需求。

@Entry
@Component
struct SwiperExample {
 @State arr: any[] = [{
                          id: 0,
                          tipText: "设备缺水，请检查设备",
                          showMoreIcon: true,
                        }, {
                          id: 1,
                          tipText: "设备电流过大，请检查设备",
                          showMoreIcon: true,
                        }, {
                          id: 2,
                          tipText: "电量低，请及时充电！",
                          showMoreIcon: false,
                        }]
  @State solutionArray: any[] = ["请检查进出水接头是否存在松动，如果排查确认接头未松动，请咨询官方售后服务电话：“400-6008878”。", "如果首次出现该故障提醒，请重新插拔电池包；如果还显示该故障，请联系商家售后。"]

  build() {
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
      Swiper() {
        ForEach(this.arr, (item) => {
          Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
            Image($r('app.media.ic_warn'))
               .width(24)
               .height(24)
               .margin({ top: 12, left: 12, bottom: 12 })
              .objectFit(ImageFit.Fill)
            Text(item.tipText)
              .width('75%')
              .textOverflow({ overflow: TextOverflow.None })
              .fontSize(16)
              .fontColor(0xd94838)
              .fontWeight(FontWeight.Medium)
              .margin({ top: 14, left: 16, })
              .padding({ bottom: 15 })
            if (item.showMoreIcon) {
              Image($r('app.media.ic_arrow'))
                .width(12)
                .height(24)
                .margin({ top: 12, right: 12, bottom: 12 })
                .objectFit(ImageFit.Fill)
                .onClick(() => {
                  //弹窗
                  AlertDialog.show(
                    {
                      title: '解决方案',
                      message: this.solutionArray[item.id],
                      confirm: {
                        value: '知道了',
                        action: () => {
                          console.info('Button-clicking callback')
                        }
                      },
                      cancel: () => {
                        console.info('Closed callbacks')
                      }
                    }
                  )
                })
            }
          }
        })
      }
      .margin({ top: 30, right: 12, left: 12, })
      .height(48)
      .borderRadius(16)
      .backgroundColor(0xfce3df)
      .index(1)
      .autoPlay(true)
      .interval(1000)
      .indicator(false)
      .loop(true)
      .duration(1500)
      .vertical(true)
      .disableSwipe(true)
    }
  }
}

总结

此例就基于ETS组件的基本使用，旨在熟悉ETS规范和对组件的初体验。

更多原创内容请关注：中软国际 HarmonyOS 技术团队

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。