实现瀑布流

使用LazyForEach进行数据懒加载，要求数据源实现IDataSource接口及成员方法。使用常量waterFlowData完成瀑布流数据项配置，包含图片资源、商品名称、折扣、售价等内容。 瀑布流效果实现步骤如下：

在生命周期函数aboutToAppear()中初始化瀑布流数据。 WaterFlow容器添加参数footer设置瀑布流滑动至尾部时展示的内容，提示已滑动到底部。 LazyForEach()从数据源中按需迭代数据，在瀑布流容器子组件FlowItem内展示数据项。 使用瀑布流属性layoutDirection设置主轴方向为FlexDirection.Column列方向，columnsTemplate设置布局列数为两列，columnsGap列间距8vp及rowsGaph行间距8vp。

// WaterFlowComponent.ets
@Component
export default struct WaterFlowComponent {
  private datasource: WaterFlowDataSource = new WaterFlowDataSource();

  aboutToAppear() {
    // 初始化瀑布流数据
    this.datasource.setDataArray(waterFlowData);
  }

  build() {
    // 瀑布流容器
    WaterFlow({ footer: (): void => this.itemFoot() }) {
      LazyForEach(this.datasource, (item: ProductItem) => {
        // 瀑布流容器子组件
        FlowItem() {
          // 展示数据项
          FlowItemComponent({ item: item })
        }
      }, (item: ProductItem) => JSON.stringify(item))
    }
    .layoutWeight(Const.WATER_FLOW_LAYOUT_WEIGHT)
    // 布局的主轴方向为列方向
    .layoutDirection(FlexDirection.Column)
    // 设置列布局数量为两列
    .columnsTemplate(Const.WATER_FLOW_COLUMNS_TEMPLATE)
    // 设置列间距
    .columnsGap($r('app.float.water_flow_columns_gap'))
    // 设置行间距
    .rowsGap($r('app.float.water_flow_row_gap'))
  }

  // 瀑布流尾部显示内容
  @Builder itemFoot() {
    Column() {
      Text($r('app.string.footer_text'))
      ...
    }
  }
}