鸿蒙之List组件详解

Kousi2024-11-10 14:22

前言：

List 组件的基本用法，可以用它来展示列表，并且实现列表滚动，日常开发的时候还可以用它来实现更为复杂的效果。
列表是一种复杂的容器，当列表项达到一定数量，超过List容器组件大小 时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。

List 表示列表容器，ListItem表示单个列表项，可以包含单个子组件。

基本用法：

js 复制代码

@Entry
@Component
struct Index {
  build() {
    List(){
      ListItem(){
        Text('hello')
      }
      ListItem(){
        Text('hello')
      }
      ListItem(){
        Text('hello')
      }
    }
  }
}

效果如下：

常用属性：

滚动条状态 属性：scrollBar()

参数：枚举 BarState

Off：不显示
On：常驻显示
Auto：按需显示（触摸时显示，2s 后消失）

js 复制代码

List() {
  listItem()
  ......
}
	.scrollBar(BarState.Off)

分割线样式 列表默认没有分割线

属性：divider()

参数：{ strokeWidth: 数字， color?: 'color', startMargin?: 数字, endMargin?: 数字 }

js 复制代码

@Entry
@Component
struct Index {
  build() {
    Column() {
      List() {
        ListItem() {
          Text('hello')
        }

        ListItem() {
          Text('hello')
        }

        ListItem() {
          Text('hello')
        }

        ListItem() {
          Text('hello')
        }
      }
      .border({width:1})
      .divider({
        strokeWidth: 1, // 设置分割线的宽度为1
        color: Color.Black, // 设置分割线的颜色为橙色
        startMargin: 10, // 设置分割线起点的边距为10
        endMargin: 10           // 设置分割线终点的边距为10
      })
    }
  }
}