HarmonyOS WaterFlow组件下的LazyForEach如何过滤无用的item？

Question

this.dataSource是通用的数据源，瀑布流中的仅需dataSource中支持瀑布流的组件item，业务上需要过滤其他Item，但如果通过下述代码实现过滤，相当于没有设置FlowItem的子模块，但仍会存在空白区域（空白区域是因为columnsGap和rowsGap照成的），如何实现LazyForEach过滤无用的item且不留空白呢？

伪代码：

WaterFlow( ) {
  LazyForEach(this.dataSource, (item: NewsItem, index: number) => {
    FlowItem() {
      if(item.isWaterFlowType){
        NewsItemJiMeiNormalCardComponent({
          newsItem: newsItem,
          onNewsItemClick: this.onNewsItemClick,
          onNewsItemChildClick: this.onNewsItemChildClick
        })
      }
    }
  })
}
backgroundColor: Color.White,
columnsTemplate: '1fr 1fr',
rowsTemplate: '1fr',
columnsGap: 10,
rowsGap: 10,

Answer 1

建议筛选并重新生成新的数据源给LazyForEach，以下是通过改样式达到效果，用了margin替代rowsGap：

@Entry
@Component
struct WaterFlowDemo {
  @State minSize: number = 80
  @State maxSize: number = 180
  @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
  @State  dataSource: WaterFlowDataSource = new WaterFlowDataSource()
  private itemWidthArray: number[] = []
  private itemHeightArray: number[] = []

  // 计算FlowItem宽/高
  getSize() {
    let ret = Math.floor(Math.random() * this.maxSize)
    return (ret > this.minSize ? ret : this.minSize)
  }

  // 设置FlowItem宽/高数组
  setItemSizeArray() {
    for (let i = 0; i < 100; i++) {
      this.itemWidthArray.push(this.getSize())
      this.itemHeightArray.push(this.getSize())
    }
  }
  aboutToAppear() {
    this.setItemSizeArray()
  }

  build() {
    Column({ space: 2 }) {
      WaterFlow() {
        LazyForEach(this.dataSource, (item: number,index:number) => {
          if (index%4 === 1){
            FlowItem() {
              Column() {
                Text("N" + index).fontSize(12).height('16')
              }
            }
            .margin({bottom:5})
            .width('100%')
            .height(this.itemHeightArray[item % 100])
            .backgroundColor(this.colors[item % 5])
          }else{
            FlowItem()
          }
        }, (item: string) => item)
      }
      .columnsTemplate('repeat(auto-fill,80)')
      .columnsGap(10)
      .padding({left:5})
      // .rowsGap(5)
      .backgroundColor(0xFAEEE0)
      .width('100%')
      .height('100%')
    }
  }
}

// 实现IDataSource接口的对象，用于瀑布流组件加载数据
export class WaterFlowDataSource implements IDataSource {
  private dataArray: number[] = []
  constructor() {
    for (let i = 0; i < 100; i++) {
      this.dataArray.push(i)
    }
  }
  // 获取索引对应的数据
  public getData(index: number): number {
    return this.dataArray[index]
  }
  // 获取数据总数
  public totalCount(): number {
    return this.dataArray.length
  }
  // 注册改变数据的控制器
  registerDataChangeListener(listener: DataChangeListener): void {
  }
  // 注销改变数据的控制器
  unregisterDataChangeListener(listener: DataChangeListener): void {
  }
}