HarmonyOS 鸿蒙Next List+ListGroup+WaterFlow

HarmonyOS 鸿蒙Next List+ListGroup+WaterFlow


```scss
Column() {

 List({space:15}){

   ListItem(){
     this.topWidget()
   }

   ListItemGroup({header:this.headWidget()}){
     ListItem(){
        this.contentWidget()
     }

   }

 }
 .height('100%')
 .width('100%')

}
.margin({ left: '10lpx', right: '10lpx' })
.width('700lpx')

//列表界面
[@Builder](/user/Builder)
contentWidget() {
  WaterFlow() {

    LazyForEach(this.datasource,(item:ExhibitList,index:number)=>{
        FlowItem() {
          this.itemWidget(item, index)
        }
    },(item:ExhibitList)=>JSON.stringify(item))
  }
  .columnsTemplate('1fr 1fr')
  .itemConstraintSize({
    minWidth: 0,
    maxWidth: '100%',
    minHeight: 0,
    maxHeight: '100%'
  })
  .layoutDirection(FlexDirection.Column)
  .width('690lpx')
  .height('85%')
  .columnsGap('5lpx')
  .rowsGap('5lpx')
  .onReachEnd(() => {
    Logger.info('到底了')
    this.getMoreExhibit()
  })
  .gesture(GestureGroup(GestureMode.Parallel), GestureMask.Normal)
  .onReachStart(()=>{
    
  })
  .margin({ left: '5lpx', right: '5lpx', top:'80lpx' })
  .width('700lpx')

}

header中的点击事件失效，不知道为什么会触发瀑布流的点击事件，谁遇到过这种问题


更多关于HarmonyOS 鸿蒙Next List+ListGroup+WaterFlow的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以看看组件树点击区域是否冲突了。

更多关于HarmonyOS 鸿蒙Next List+ListGroup+WaterFlow的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，List、ListGroup和WaterFlow是用于构建用户界面的组件。List组件用于展示一组数据项，通常以垂直或水平列表的形式呈现。ListGroup是List的扩展，允许将多个List组合在一起，形成一个分组的列表结构。WaterFlow则是一种瀑布流布局，适用于展示不规则大小的内容块，如图片或卡片。

List组件支持多种交互方式，如滚动、点击和长按等。开发者可以通过设置不同的属性来定制列表的外观和行为，例如列表项的高度、间距和背景颜色等。ListGroup通过将多个List组合在一起，可以实现更复杂的列表结构，如带有标题的分组列表。

WaterFlow组件通过自动调整内容块的位置，实现高效的布局管理。它支持动态加载数据，适合展示大量不规则内容。开发者可以自定义内容块的尺寸和样式，以实现丰富的视觉效果。

这些组件的使用依赖于鸿蒙的ArkUI框架，开发者可以通过声明式UI语法快速构建界面。List、ListGroup和WaterFlow组件的API设计简洁，易于集成到现有的应用程序中。通过组合这些组件，开发者可以创建出高效、灵活且美观的用户界面。

回到顶部