【ArkTS】 WaterFlow瀑布流容器的使用

转载于https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md/

import hilog from '@ohos.hilog';
import testNapi from 'libentry.so'
import { WaterFlowDataSource } from './widget/WaterFlowDataSource';

@Entry
@Component
struct Index {
  @State minSize: number = 50
  @State maxSize: number = 100
  @State fontSize: number = 24
  @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
  scroller: Scroller = new Scroller()
  datasource: WaterFlowDataSource = new WaterFlowDataSource()
  private itemWidthArray: number[] = []
  private itemHeightArray: number[] = []

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

  // 保存flow item宽/高
  getItemSizeArray() {
    for (let i = 0; i < 100; i++) {
      this.itemWidthArray.push(this.getSize())
      this.itemHeightArray.push(this.getSize())
    }
  }

  aboutToAppear() {
    this.getItemSizeArray()
  }

  build() {
    Column({ space: 2 }) {
      WaterFlow({  scroller: this.scroller }) {
        LazyForEach(this.datasource, (item: number) => {
          FlowItem() {
            Stack({alignContent : Alignment.BottomEnd}) {

              Column(){
                Text("N" + item)
                  .fontSize(12)
                  .width('100%')
                  .textAlign(TextAlign.Center)
              }
              .width('100%')
              .opacity(0.5)
              .backgroundColor(0xFFFFFF)

            }
            .width('100%')
            .height('100%')
            .backgroundColor(this.colors[item % 5])
          }
          .width('100%')
          .height(this.itemHeightArray[item])
        }, item => item)
      }
      .columnsTemplate("1fr 1fr")
      .itemConstraintSize({
        minWidth: 0,
        maxWidth: '100%',
        minHeight: 0,
        maxHeight: '100%'
      })
      .onReachStart(() => {
        console.info("onReachStart")
      })
      .onReachEnd(() => {
        console.info("onReachEnd")
      })
      .backgroundColor(0xFAEEE0)
      .width('100%')
      .height('100%')
      .layoutDirection(FlexDirection.Column)
    }.height('100%')
  }
}