鸿蒙布局List简介

List–常见的布局容器

List是在app开发中最常见的一种布局方式，例如通讯录、新闻列表等。在鸿蒙应用中List布局使用也很普遍。

List 创建方式

创建方式一，通过Listitem

ListItem是List的子组件，List列表展示的内容需要通过ListItem承载才能展示。

      List({space: 10}){ // ListItem之间的间距
        ListItem(){
          Text('ListItem1')
            .extendText()
        }
        ListItem(){
          Text('ListItem2')
            .extendText()
        }
        ListItem(){
          Text('ListItem3')
            .extendText()
        }
        ListItem(){
          Text('ListItem4')
            .extendText()
        }
        ListItem(){
          Text('ListItem5')
            .extendText()
        }
        ListItem(){
          Text('ListItem6')
            .extendText()
        }
      }
      .margin(16)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这是最简单的创建方式，将需要展示的内容写在ListItem中。

创建方式二，通过ForEach和Listitem

在实际使用过程中，我们不会像 方式一 那样去创建列表；我们可以使用循环的方式去创建。

先声明一组数据

private arr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]
1

将声明的这组数据通过ForEach的方式，渲染到屏幕上。

  @Builder listForeach() {
    List({space: 20,initialIndex: 0}){
      ForEach(
        this.arr,
        (item,idx)=>{
          ListItem(){
            Text('ListItem:' + item + '   idx:'+idx)
              .extendText()
          }
      },(item,idx)=>{
        return item + idx
      })
    }
    .listDirection(Axis.Vertical) // 排列方向
    .divider({strokeWidth: 10, color: Color.Green}) // 每行之间的分界线
    .edgeEffect(EdgeEffect.Spring) // 滑动到边缘的效果
    .onScrollIndex((firstIndex: number, lastIndex: number) => {
      console.info('first' + firstIndex)
      console.info('last' + lastIndex)
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

针对上面使用到的一些方法做下说明；

1. List({space: 20,initialIndex: 0}) space：表示两个Listitem之间的间距,initialIndex代表从第0个ListItem处开始展示
2. listDirection(Axis.Vertical) // 排列方向
3. divider({strokeWidth: 10, color: Color.Green}) // 每行之间的分界线
4. edgeEffect(EdgeEffect.Spring) // 滑动到边缘的效果
5. onScrollIndex((firstIndex: number, lastIndex: number)=> {})  滚动位置监听
1
2
3
4
5

创建方式三，通过ListItemGroup

ListItemGroup表述分组.

还是先准备数据

private groupArr = ['Group1','Group2','Group3','Group4']
private groupDict = {'Group1':[0,1,2,3],'Group2':[4,5,6],'Group3':[7,8,9,10],'Group4':[11,12,13]}
1
2

将数据渲染到页面

  @Builder listGroup() {
    List({space: 20,initialIndex: 0}){
      ForEach(
        this.groupArr,
        (item,idx)=>{
          ListItemGroup({space: 6,header: this.header(item)}){
            ForEach(
              this.groupDict[item],
              (itemChild,idxChild)=>{
                ListItem(){
                  Text('ListItem:' + itemChild + '   idx:'+idxChild)
                    .extendText()
                }
              }
            )
          }
          .backgroundColor(Color.Grey)
        }
      )
    }
    .sticky(StickyStyle.Header|StickyStyle.Footer) 

  }
  @Builder header(title: string) {
    Text(title)
      .fontColor(Color.Black)
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
      .textAlign(TextAlign.Center)
      // .align(Alignment.Center)
      .width('100%')
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

展示效果：

分组效果通过上面图片可展示出来。

ListItemGroup({space: 6,header: this.header(item)}) 中使用了space和header

space: 表示分组内，每个子ListItem之间的间距
header：表示分组的头部，这个需要自定义。

与之对应的还有一个footer。
1
2
3
4

还是用了一个sticky(StickyStyle.Header|StickyStyle.Footer) 表示滚动过程中ListItemGroup的顶部或者底部会被固定。