鸿蒙开发占多列的瀑布流

鸿蒙开发占多列的瀑布流

正常样式的瀑布流没什么好说，大家看下官方文档应该都写得来。关键是有些item要占多列，整行的效果

先看下效果图：

还有底部的效果图的，就不放了，你们应该也看得懂的

思路：

关键在于WaterFlowSections的定义，具体用法可以看官网文档

部分参考代码：

// qq:893151960
  build() {
    Column(){
      MyWaterList({lazyDataSource:this.lazyDataSource,sections:this.sections,ContentItemBuilder:(item:HomeBaseListBean,index:number)=>{
        this.WaterFallItemComponent(item)
      },showHeadItem:true,HeadItemBuilder:()=>{
        this.HomeHeadBuilder()
      },showFootItem:true,FootItemBuilder:()=>{
        this.HomeBottomBuilder()
      },MiddleBuilder:()=>{
        this.MiddleBuilder()
      }})
    }
    .backgroundColor($r('app.color.color_ee'))
    .padding({
      left:10,
      right:10
    })

  }

aboutToAppear(): void {
    // 对应的是MyWaterList的头部第一个
    this.sections.push(this.headSection)
    // 先添2个数据
    this.lazyDataSource.setNewData([{
      headImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.nga.178.com%2Fattachments%2Fmon_201709%2F27%2FfrQ2h-3ntdZ1lT3cSxc-sl.jpg&refer=http%3A%2F%2Fimg.nga.178.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1727851564&t=af156e8da9300dc437786d5b1ca830b6',
      desc: '哈哈我还没看够233'
    }, {
      headImg: 'https://tvax2.sinaimg.cn/mw1024/006yt1Omgy1gbzr0432eyj31j02dx4qr.jpg',
      desc: '哈哈我还没看够666我要换行我要换行我要换行我要换行我要换行我要换行我要换行我要换行'
    }])
    this.sections.splice(1, 1, [{
      itemsCount: 2,
      crossCount: 2
    }])

完整demo项目结构图：

有需要源码的或者有问题的可私信我