#星计划# HarmonyOS组件介绍-Waterflow 原创

左翼风发
发布于 2023-12-26 18:21
浏览
0收藏

背景

当我们浏览购物应用时,比如某宝,某书,会发现浏览的布局都是错落有致的,如图:
#星计划# HarmonyOS组件介绍-Waterflow-鸿蒙开发者社区

这个对应HarmonyOS应用开发就需要我们用到WaterFlow组件,本篇我们就此组件进行介绍。

WaterFlow组件介绍

1,WaterFlow是容器组件,内部分裂成行和列形式,通过容器自身的排列规则,将不同大小的“项目”自上而下,如瀑布般紧密布局。

该组件从API Version 9开始支持。官方doc地址:https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-waterflow-0000001582933637-V3

简单解读

  • 接口

    WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
    
    参数名 参数类型 必填 参数描述
    footer CustomBuilder 设置WaterFlow尾部组件。
    scroller Scroller 可滚动组件的控制器,与可滚动组件绑定。目前瀑布流仅支持Scroller组件的scrollToIndex接口。
  • 属性

    名称 参数类型 描述
    columnsTemplate string 设置当前瀑布流组件布局列的数量,不设置时默认1列。例如, ‘1fr 1fr 2fr’ 是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。并支持auto-fill。默认值:‘1fr’
    rowsTemplate string 设置当前瀑布流组件布局行的数量,不设置时默认1行。例如, '1fr 1fr 2fr’是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。并支持auto-fill。默认值:‘1fr’
    itemConstraintSize ConstraintSizeOptions 设置约束尺寸,子组件布局时,进行尺寸范围限制。
    columnsGap Length 设置列与列的间距。默认值:0
    rowsGap Length 设置行与行的间距。默认值:0
    layoutDirection FlexDirection 设置布局的主轴方向。默认值:FlexDirection.Column

    layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况,分为以下三种设置模式:

    • layoutDirection设置纵向布局(FlexDirection.Column 或 FlexDirection.ColumnReverse)

      此时columnsTemplate有效(如果未设置,取默认值)。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时,瀑布流组件纵向布局,辅轴均分成横向2列。

    • layoutDirection设置横向布局(FlexDirection.Row 或 FlexDirection.RowReverse)

      此时rowsTemplate有效(如果未设置,取默认值)。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时,瀑布流组件横向布局,辅轴均分成纵向3列。

    • layoutDirection未设置布局方向

      布局方向为layoutDirection的默认值:FlexDirection.Column,此时columnsTemplate有效。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时,瀑布流组件纵向布局,辅轴均分成横向2列。

  • 事件

    名称 功能描述
    onReachStart(event: () => void) 瀑布流组件到达起始位置时触发。
    onReachEnd(event: () => void) 瀑布流组件到底末尾位置时触发。

代码示例

export class DataInfo {
  type!:string
  src!:string
  color!:string
}

// 实现IDataSource接口的对象,用于瀑布流组件加载数据
export class WaterFlowDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []
  private bcolor: string[] = [
    "#E29C45","#896C39","#D9B611","#BDDD22","#C9DD22","#AFDD22",
"#789262","#A3D900","#9ED900","#0EB83A","#0AA344","#00BC12","#0C8918","#1BD1A5",
"#2ADD9C","#48C0A3","#3DE1AD","#40DE5A","#9D2933","#BF242A","#FF4777","#FF461F",
"#F36838","#FFB61E","#FFC64B","#E9BB1D","#845A33","#16A951","#1685A9","#003472",
"#FFF2DF","#FFB3A7","#ED5736","#F00056","#F47983","#DB5A6B","#F20C00","#C93756",
"#F05654","#FF2121","#8C4356","#C83C23","#FF4C00","#FF4E20","#F35336","#CB3A56",
"#FF2D51","#C91F37","#EF7A82","#FF0097","#FF3300","#C3272B","#A98175","#C32136",
"#B36D61",  ]

  // 获取索引对应的数据
  public getData(index: number): DataInfo {
    {
      let bcin = index%50
      return { type: "img", src: "autoimage" + index + ".jpg", color: this.bcolor[bcin]}
    }
  }

  // 获取数据总数
  public totalCount(): number {
    return 100
  }

  // 注册改变数据的控制器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  // 注销改变数据的控制器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'WaterFlow'
  datasource: WaterFlowDataSource = new WaterFlowDataSource()
  @Builder itemFoot() {
    Column() {
      Text(`Footer`)
        .fontSize(50)
        .textAlign(TextAlign.Center)
        .backgroundColor("#F0F0F4")
        .width("100%")
        .height(150)
        .align(Alignment.Center)
        .margin({ top: 2 })
    }
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Row() {
          WaterFlow({footer: this.itemFoot.bind(this)}) {
            LazyForEach(this.datasource, (item:DataInfo, idx:number) => {
              FlowItem() {
                Column() {
                  Text(`${item.type}${idx}`).fontSize(32).height('32').width('100')
                  if (idx % 4 == 0) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(100)
                  } else if (idx % 4 == 1) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(200)
                  } else if (idx % 4 == 2) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(240)
                  } else if (idx % 4 == 3) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(280)
                  }
                }.backgroundColor(item.color)
              }
              .width('100%')
            })
          }
          .alignSelf(ItemAlign.Center)
          .columnsTemplate('1fr 1fr 1fr')
          .layoutDirection(FlexDirection.Column)
          .columnsGap(12)
          .rowsGap(12)
          .height('100%')
          .width('100%')
          .padding({ left: 12, right: 12, top: 12, bottom: 12 })
          .backgroundColor(Color.White)
          .onReachEnd(() => {
            console.info("onReachEnd")
          })
        }.width('100%')
      }
      .width('100%')

    }
    .height('100%')
  }
}

#星计划# HarmonyOS组件介绍-Waterflow-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
MyApplication6.rar 304.53K 26次下载
1
收藏
回复
举报
回复
    相关推荐