鸿蒙~ArkUI list 第一篇 基础

子组件

包含ListItem、ListItemGroup子组件。

List的子组件的索引值计算规则：

• 按子组件的顺序依次递增。
• if/else语句中，只有条件成立的分支内的子组件会参与索引值计算，条件不成立的分支内子组件不计算索引值。
• ForEach/LazyForEach语句中，会计算展开所有子节点索引值。
• if/else/ForEach/LazyForEach发生变化以后，会更新子节点索引值。
• ListItemGroup作为一个整体计算一个索引值，ListItemGroup内部的ListItem不计算索引值。
• List子组件的visibility属性设置为Hidden或None依然会计算索引值。
• List子组件的visibility属性设置为None时不显示，但该子组件上下的space还会生效。

1、设置主轴方向：

         listDirection(Axis.Vertical)  横屏还是竖屏

2、设置交叉轴布局：

     - lanes()  显示的数量
     - alignListItem() :ListItemAlign.Center 、ListItemAlign.Start、ListItemAlign.End

3、ListItem 组内成员大于2需要用

    - 需要用Row（）包裹

4、自定义列表样式

- 设置内容间距

divider({
  strokeWidth: 1,
  startMargin: 60,
  endMargin: 10,
  color: '#ffe9f0f0'
})

• 添加滚动条

List() {
  ...
}
.scrollBar(BarState.Auto)

5、分组

--支持分组列表 （最下面的demo，简单使用）ListItemGroup

6、添加粘性标题

.sticky(StickyStyle.Header) // 设置吸顶，实现粘性标题效果

demo

class Test {
  name:string;
  icon: Resource

  constructor(name: string, icon:Resource) {
    this.name = name;
    this.icon = icon;
  }

}

@Entry
@Component
struct Main {

  @Builder itemHead(text: string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(Color.Pink)
      .width("100%")
      .padding(5)
  }


  groups: Object[] = [
    {
      title: "A",
      tests:[
        new Test("分组A_1", $r('app.media.app_icon')),
        new Test("分组A_2", $r('app.media.app_icon')),
        new Test("分组A_3", $r('app.media.app_icon')),
        new Test("分组A_4", $r('app.media.app_icon')),
      ]
    },
    {
      title: "B",
      tests:[
        new Test("分组A_1", $r('app.media.app_icon')),
        new Test("分组B_2", $r('app.media.app_icon')),
        new Test("分组B_3", $r('app.media.app_icon')),
        new Test("分组B_4", $r('app.media.app_icon')),
      ]
    },
    {
      title: "C",
      tests:[
        new Test("分组C_1", $r('app.media.app_icon')),
        new Test("分组C_2", $r('app.media.app_icon')),
        new Test("分组C_3", $r('app.media.app_icon')),
        new Test("分组C_4", $r('app.media.app_icon')),
      ],
    },
    {
      title: "D",
      tests:[
        new Test("分组D_1", $r('app.media.app_icon')),
        new Test("分组D_2", $r('app.media.app_icon')),
        new Test("分组D_3", $r('app.media.app_icon')),
        new Test("分组D_4", $r('app.media.app_icon')),
      ],
    },
    {
      title: "E",
      tests:[
        new Test("分组E_1", $r('app.media.app_icon')),
        new Test("分组E_2", $r('app.media.app_icon')),
        new Test("分组E_3", $r('app.media.app_icon')),
        new Test("分组E_4", $r('app.media.app_icon')),
      ],
    }

  ]
  build() {
    List() {
      ForEach(this.groups, (item) => {
        ListItemGroup({header:this.itemHead(item.title)}) {
            ForEach(item.tests, (it: Test) => {
              ListItem() {
                Row() {
                  Image(it.icon)
                    .width(50)
                    .height(50)
                  Text(it.name)
                }

              }
            })
        }
      })
    }
    .sticky(StickyStyle.Header)  // 设置吸顶，实现粘性标题效果
    .listDirection(Axis.Vertical)
    .lanes(1)
    .alignListItem(ListItemAlign.Start)
    .width("100%")
    .scrollBar(BarState.On)
    .divider({
      strokeWidth: 2,
      startMargin: 0,
      endMargin: 0,
      color: Color.Pink
    })
    .onReachEnd(() => {
      console.info("huxiubo", `onReachEnd`);
    })
  }
}

微信图片_20231224220344.png