OpenHarmony - ArkUI(TS)声明式开发之故障轮播-51CTO.COM

前言

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

UI开发模式

OpenHarmony - ArkUI(TS)声明式开发之故障轮播-开源基础软件社区

效果演示

OpenHarmony - ArkUI(TS)声明式开发之故障轮播-开源基础软件社区

实现步骤

1、新建项目

OpenHarmony - ArkUI(TS)声明式开发之故障轮播-开源基础软件社区

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相关属性。

名称	参数类型	默认值	描述
index	number	0	设置当前在容器中显示的子组件的索引值。
autoPlay	boolean	false	子组件是否自动播放，自动播放状态下，导航点不可操作。
interval	number	3000	使用自动播放时播放的时间间隔，单位为毫秒。
indicator	boolean	true	是否启用导航点指示器。
loop	boolean	true	是否开启循环。
duration	number	400	子组件切换的动画时长，单位为毫秒。
vertical	boolean	false	是否为纵向滑动。
itemSpace	Length	0	设置子组件与子组件之间间隙。
cachedCount	number	1	设置预加载子组件个数。
disableSwipe	boolean	boolean	禁用组件滑动切换功能。
curve	Curve	Curve.Ease	设置Swiper的动画曲线，默认为淡入淡出曲线。
indicatorStyle			设置indicator样式

Image相关参数和属性。

参数名	参数类型	必填	默认值	参数描述
src	string\| PixelMap\|Resource	是	-	图片的数据源，支持本地图片和网络图片，建议使用$r方式来管理需全局使用的图片资源。
alt	string	否	-	加载时显示的占位图。支持本地图片和网络路径。
objectFit	ImageFit	否	Cover	图片的缩放类型。
objectRepeat	ImageRepeat	否	NoRepeat	图片的重复样式，SVG类型图源不支持该属性。
interpolation	ImageInterpolation	否	None	设置图片的插值效果，仅针对图片放大插值。SVG类型图源和PixelMap资源不支持该属性。
renderMode	ImageRenderMode	否	Original	图片渲染的模式，SVG类型图源不支持该属性。
sourceSize	{width: number,height: number}	否	-	图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。PixelMap资源不支持该属性。
syncLoad	boolean	否	false	是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。

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规范和对组件的初体验。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com。