鸿蒙第8篇——WaterFlow组件

WaterFlow组件又称瀑布流组件，在APP中显示列表数据，除了使用List组件和Grid组件外，也经常使用WaterFlow组件。

先看效果图

1.创建WaterFlow组件

使用下面的接口创建WaterFlow组件

WaterFlow(options?: WaterFlowOptions)

WaterFlow组件的子组件是FlowItem，用于展示瀑布流的Item.

2. WaterFlow组件的常用属性

3.WaterFlow的组件的常用事件

4.示例代码

Index_WaterFlow.ets 如下：

typescript 复制代码

import { WaterFlowDataSource } from '../module/WaterFlowDataSource'


@Entry
@Component
struct  Index_WaterFlow{

  private waterFlowDataSource : WaterFlowDataSource = new WaterFlowDataSource();
  @State sections: WaterFlowSections = new WaterFlowSections()

  oneColumSection: SectionOptions = {
    itemsCount: 1,  // 该分组中Item的个数
    crossCount: 1, // 列数为 1
    margin : {bottom : 10},
    onGetItemMainSizeByIndex : () =>{
      return 160
    }
  }

  twoColumSection : SectionOptions = {
    itemsCount:14, // 该分组中Item的个数
    crossCount:2, // 列数为2
    onGetItemMainSizeByIndex : () =>{
      return 160
    }
  }

  aboutToAppear(): void {
    // 准备数据源
    this.waterFlowDataSource.setDataArray(WaterFlowDataModule.WATER_FLOW_DATA)
    this.sections.push(this.oneColumSection)
    this.sections.push(this.twoColumSection)
  }

  build() {
    // 瀑布流
    WaterFlow({sections : this.sections}){
      LazyForEach(this.waterFlowDataSource , (item:ResourceStr) =>{
        FlowItem() {
          Image(item)
            .height('100%')
            .width('100%')
            .borderRadius(12)

        }
      },(item : ResourceStr , index : number) => index + JSON.stringify(item))
    }
    .padding({left : 16 , right : 16})
    .margin({top : 16})
    .layoutWeight('100%')
    .rowsGap(10)
    .columnsGap(10)

  }
}


export class WaterFlowDataModule{
  /**
   *WaterFlow item image
   */
  static readonly WATER_FLOW_DATA: Resource[] = [
    $r('app.media.t0'),
    $r('app.media.t1'),
    $r('app.media.t2'),
    $r('app.media.t3'),
    $r('app.media.t4'),
    $r("app.media.t5"),
    $r("app.media.t6"),
    $r('app.media.t7'),
    $r('app.media.t0'),
    $r('app.media.t1'),
    $r('app.media.t2'),
    $r('app.media.t3'),
    $r('app.media.t4'),
    $r("app.media.t5"),
    $r("app.media.t6"),
  ];
}

WaterFlowDataSource.ets 文件如下：

typescript 复制代码

/***
 * 实现IDataSource接口的对象， 用于瀑布组件加载数据
 */
export class WaterFlowDataSource implements IDataSource{

  private dataArray: ResourceStr[] = []
  private listeners: DataChangeListener[] = []

  constructor() {}

  public setDataArray(dataArray: ResourceStr[]): void{
    this.dataArray = dataArray;
  }

  totalCount(): number {
    return this.dataArray.length;
  }

  getData(index: number): ResourceStr {
    return this.dataArray[index];
  }

  //通知数据重新加载
  notifyDataReload(): void{
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

  //通知数据增加
  notifyDataAdd(index: number): void{
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  //通知数据变化
  notifyDataChange(index: number): void{
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

  //通知数据删除
  notifyDataDelete(index: number): void{
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }

  //通知数据移动
  notifyDataMove(from: number, to:number): void{
    this.listeners.forEach(listener => {
      listener.onDataMove(from,to)
    })
  }

  //通知数据批量修改
  notifyDatasetChange(operations: DataOperation[]): void{
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations)
    })
  }

  //注册改变数据的控制器
  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)
    }
  }

  // 删除第一个元素
  public delete1stItem(): void {
    this.dataArray.splice(0, 1)
    this.notifyDataDelete(0)
  }

  // 删除第二个元素
  public delete2ndItem(): void {
    this.dataArray.splice(1, 1)
    this.notifyDataDelete(1)
  }

  // 删除最后一个元素
  public deleteLastItem(): void {
    this.dataArray.splice(-1, 1)
    this.notifyDataDelete(this.dataArray.length)
  }

  // 在指定索引位置删除一个元素
  public deleteItem(index: number): void {
    this.dataArray.splice(index, 1)
    this.notifyDataDelete(index)
  }

  // 重新加载数据
  public reload(): void {
    this.dataArray.splice(1, 1)
    this.dataArray.splice(3, 2)
    this.notifyDataReload()
  }
}