鸿蒙布局元素篇（五）-创建列表（List）

用来创建类似音乐列表，购物清单这种子元素结构相同的滚动列表的布局元素。一般会和forEach语句一起使用。包含ListItem、ListItemGroup子组件。

参数

参数名	参数描述
space	子组件主轴方向的间隔。默认值：0
initialIndex	设置当前List初次加载时视口起始位置显示的item的索引值。默认值：0
scroller	可滚动组件的控制器。用于与可滚动组件进行绑定。

独有属性

参数名	参数描述
listDirection	设置List组件排列方向。
divider	设置ListItem分割线样式，默认无分割线。
scrollBar	设置滚动条状态。
cachedCount	设置列表中ListItem/ListItemGroup的预加载数量，其中ListItemGroup将作为一个整体进行计算
edgeEffect	设置组件的滑动效果。
chainAnimation	设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。
multiSelectable	是否开启鼠标框选。
lanes	lanes用于决定List组件在交叉轴方向按几列布局。
alignListItem	List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
sticky	配合ListItemGroup组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。

特性很多，不一一讲解了，使用以上特性实现一个通讯录来展示各个属性的用途

包含以下功能

按字母分类展示通讯名称
将字母做为列表组的hearder组件
滚动的时候头部组件吸顶
每个名称下有下划线
右侧展示字母块的缩影
滑动通讯录右侧缩影动态修改当前字母块
手动选择右侧缩影字母块，左侧通讯录滚动到对应块

scss 复制代码

interface ContactMap {
  [t:string]: Array<string>
}

@Entry
@Component
struct Index6 {
  private listScroller: Scroller = new Scroller();
  @State contact:Array<string> = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
  @State contactMap:ContactMap = {
    A: ['安1', '安2'],
    B: ['包1', '包2', '包3', '包4'],
    C: ['曹1', '曹2', '曹3'],
    D: ['大1', '大2', '大3'],
    E: ['E1', 'E2', 'E3'],
    F: ['F1', 'F2', 'F3'],
    G: ['G1', 'G2', 'G3'],
  }
  @State selectedIndex: number = 1
  // 内置组件
  @Builder itemHead(text:string) {
    Row() {
      Text(text).width('100%').height(50).fontSize(30).backgroundColor('#f2f3f5')
    }
  }
  build() {
      RelativeContainer() {
        // initialIndex：1 初次展示数组第二项（下标0开始）
        List({ initialIndex: 1, scroller: this.listScroller }) {
          ForEach(this.contact, (o: string) => {
            // 列表组 header：设置列表组的头部组件
            ListItemGroup({ header: this.itemHead(o) }) {
              ForEach(this.contactMap[o], (name: string) => {
                // 列表项
                ListItem() {
                  Row() {
                    // 假装头像
                    Row() {
                    }
                    .width(40)
                    .height(40)
                    .border({
                      radius: 40
                    })
                    .margin({ right: 20, left: 10 })
                    .backgroundColor('#f58438')

                    Text(name).height(60).fontSize(30)
                  }
                }
              })
              // 设置ListItem分割线样式
            }.divider({
              // 分割线宽度
              strokeWidth: 1,
              // 分割线距离头部距离
              startMargin: 60,
              // 分割线距离尾部距离
              endMargin: 10,
              color: '#ffe9f0f0'
            })
          })
        }
        .onScrollIndex((firstIndex: number) => {
          this.selectedIndex = firstIndex
          // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
        })
        // 设置列表垂直方向排列（默认值）
        .listDirection(Axis.Vertical)
        .cachedCount(3)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        }).height('100%').id("row1")
        // 将头部作为吸顶组件
        .sticky(StickyStyle.Header)


        // 官方提供可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。
        AlphabetIndexer({ arrayValue: this.contact, selected: 0 })
          .selected(this.selectedIndex)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          right: { anchor: '__container__', align: HorizontalAlign.End }
        }).id("row2").margin({top: '50%',right: 20}).font({
          size: 20,
          weight: FontWeight.Bold
        })
          .selectedFont({
            size: 20,
            weight: FontWeight.Bold
          })
          .itemSize(40)
          .onSelect((index:number) => {
            // 手动切换当前列表块
            this.selectedIndex = index
            this.listScroller.scrollToIndex(index)
          })

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

实现效果