HarmonyOS waterFlow里面是否可以嵌套一个横向滑动的list？

Question

如题：HarmonyOS waterFlow里面是否可以嵌套一个横向滑动的list？

Answer 1

1.用waterflow套flowitem+lazyforeach，然后flowitem里面套list

2.用scroll套list和waterflow来写，参考下方demo实现

// Index.ets
import { WaterFlowDataSource } from './WaterFlowDataSource'

@Entry
@Component
struct WaterFlowDemo {
  @State minSize: number = 80
  @State maxSize: number = 180
  @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[] = []
  private arr: number[] = []
  private scrollerForList: Scroller = new Scroller()
  @State hitModel: HitTestMode = HitTestMode.Default
  // 计算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() {
    for (let i = 0; i < 20; i++) {
      this.arr.push(i)
    }
    this.setItemSizeArray()
  }

  @Builder
  itemFoot() {
    Column() {
      Text(`Footer`)
        .fontSize(10)
        .backgroundColor(Color.Red)
        .width(50)
        .height(50)
        .align(Alignment.Center)
        .margin({ top: 2 })
    }
  }

  build() {
    Scroll(){
      Column({ space: 2 }) {
        Row() {
          List({ space: 20, initialIndex: 3, scroller: this.scrollerForList }) {
            ForEach(this.arr, (item: number) => {
              ListItem() {
                Text('' + item)
                  .width('100%').height(100).fontSize(16)
                  .textAlign(TextAlign.Center)
              }
              .borderRadius(10).backgroundColor(0xFFFFFF)
              .width('60%')
              .height('80%')
            }, (item: number) => JSON.stringify(item))
          }
          .chainAnimation(true)
          .edgeEffect(EdgeEffect.Spring)
          .listDirection(Axis.Horizontal)
          .height(100)
          .width(100)
          .scrollSnapAlign(ScrollSnapAlign.CENTER)
          .borderRadius(10)
          .backgroundColor(0xDCDCDC)
        }
        .backgroundColor(0xDCDCDC)
        .padding({ top: 10 })

        WaterFlow() {
          LazyForEach(this.dataSource, (item: number) => {
            FlowItem() {
              Column() {
                Text("N" + item).fontSize(12).height('16')
                Image('res/waterFlowTest(' + item % 5 + ').jpg')
                  .objectFit(ImageFit.Fill)
                  .width('100%')
                  .layoutWeight(1)
              }
            }
            .onAppear(() => {
              // 即将触底时提前增加数据
              if (item + 20 == this.dataSource.totalCount()) {
                for (let i = 0; i < 100; i++) {
                  this.dataSource.addLastItem()
                }
              }
            })
            .width('100%')
            .height(this.itemHeightArray[item % 100])
            .backgroundColor(this.colors[item % 5])
          }, (item: string) => item)
        }
        .columnsTemplate("1fr 1fr")
        .columnsGap(10)
        .rowsGap(5)
        .backgroundColor(0xFAEEE0)
        .width('100%')
        .height('100%')
        .onReachStart(() => {
          console.info('waterFlow reach start')
        })
        .onScrollStart(() => {
          console.info('waterFlow scroll start')
        })
        .onScrollStop(() => {
          console.info('waterFlow scroll stop')
        })
        .onScrollFrameBegin((offset: number, state: ScrollState) => {
          console.info('waterFlow scrollFrameBegin offset: ' + offset + ' state: ' + state.toString())
          return { offsetRemain: offset }
        })
        .nestedScroll( { scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward:NestedScrollMode.SELF_FIRST, })
      }
    }
  }
}