第十五讲_ArkUI列表容器（List）

最新推荐文章于 2024-05-28 16:51:17 发布

文大奇Quiin

最新推荐文章于 2024-05-28 16:51:17 发布

阅读量1.5k

点赞数 29

分类专栏： harmonyos应用开发文章标签： ArkTS typescript javascript HarmonyOS 前端

本文链接：https://blog.csdn.net/wenqi1992/article/details/135837363

版权

harmonyos应用开发专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文详细介绍了ArkUI中的List组件及其子组件ListItem和ListItemGroup的用法，包括设置主轴和交叉轴方向、对齐方式、列表样式，以及ListItemGroup的分组和粘性标题功能。同时提到了相关布局组件如Row,Column等，为HarmonyOS应用开发做准备。

摘要由CSDN通过智能技术生成

1. 列表容器概述

当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。
ListItem 组件表示单个列表项。
ListItemGroup 组件用于列表数据的分组展示，其子组件也是 ListItem。
List 容器组件的子组件必须是 ListItemGroup 或 ListItem，ListItem 和 ListItemGroup 必须配合 List 来使用。

2. List和ListItem的使用

2.1 设置主轴方向

List 容器组件通过 listDirection 属性设置主轴方向。

Axis.Horizontal：主轴沿水平方向
Axis.Vertical：主轴沿垂直方向（默认值）

2.2 设置交叉轴对齐方式

List 容器组件通过 alignListItem 属性设置交叉轴对齐方式。

ListItemAlign.Start
ListItemAlign.Center
ListItemAlign.End

2.3 设置交叉轴列表项数量

List 容器组件通过 lanes 属性设置交叉轴排列的列表项数量。

方式一：直接指定列表项数量
方式二：尺寸自适应决定列表项数量

@Entry
@Component
struct EgLanes {
  @State egLanes: LengthConstrain = { minLength: 200, maxLength: 300 }
  build() {
    List() {
    }
    // 当List组件宽度为300vp时，由于minLength为200vp，此时列表为一列。
    // 当List组件宽度变化至400vp时，符合两倍的minLength，则此时列表自适应为两列。
    .lanes({minLength: 200, maxLength: 300})
  }
}

2.4 设置列表样式

List 容器组件通过 space 参数设置列表项在主轴方向的间距。

List 容器组件通过 divider 属性给列表项之间添加分隔线。

@Entry
@Component
struct EgDivider {
  @State egDivider: DividerTmp = new DividerTmp(1, 60, 10, '#ffe9f0f0')
  build() {
    List() {
    }
    .divider({
      // 设置分割线宽度
      strokeWidth: 1,
      // 离列表项目开端距离
      startMargin: 60,
      // 离列表项目尾部距离
      endMargin: Length = 10,
      // 设置分割线颜色
      color: '#ffe9f0f0'
    })
  }
}

List 容器组件通过 scrollBar 属性控制列表滚动条的显示。
- Off：不显示
- On：常驻显示
- Auto：按需显示(触摸时显示，2s 后消失)

@Entry
@Component
struct ListContainer {
  build() {
    // space参数设置列表项在主轴方向的间距
    List({space: 10}) {
      ListItem() {
        Text("张三")
          .fontSize(30)
      }
      ListItem() {
        Text("李四")
          .fontSize(30)
      }
      ListItem() {
        Text("王五")
          .fontSize(30)
      }
      ListItem() {
        Text("徐六")
          .fontSize(30)
      }
      ListItem() {
        Text("童七")
          .fontSize(30)
      }
      ListItem() {
        Text("陈八")
          .fontSize(30)
      }
      ListItem() {
        Text("刘九")
          .fontSize(30)
      }
    }
    // 建议在初始化列表时指定宽和高
    .height(200)
    .width(200)
    // 设置主轴的方向，默认为Axis.Vertical
    .listDirection(Axis.Vertical)
    // 设置交叉轴对齐方式
    .alignListItem(ListItemAlign.Center)
    // 设置分割线
    .divider({
      strokeWidth: 1,
      color: Color.Blue,
      startMargin: 10,
      endMargin: 10
    })
    // 设置滚动条
    .scrollBar(BarState.Auto)
    .backgroundColor(Color.Orange)
  }
}

在这里插入图片描述

3. List和ListItemGroup的使用

在 List 容器组件中使用 ListItemGroup 对项目进行分组。

3.1 设置分组的头部组件

ListItemGroup 组件通过 header 参数设置列表分组的头部组件。

3.2 设置粘性标题

通过给List组件设置sticky属性为StickyStyle.Header，即可实现列表的粘性标题效果。

@Entry
@Component
struct ListContainer {
  // 利用@Builder创建一个组件
  @Builder ListHeader(header: string) {
    Row() {
      Text(header)
        .fontSize(40)
    }
    .width("100%")
    .backgroundColor(Color.Grey)
  }

  build() {
    // space参数设置列表项在主轴方向的间距
    List({space: 10}) {
      ListItemGroup({header: this.ListHeader("一班")}) {
        ListItem() {
          Text("张三")
            .fontSize(30)
        }
        ListItem() {
          Text("李四")
            .fontSize(30)
        }
      }

      ListItemGroup({header: this.ListHeader("二班")}) {
        ListItem() {
          Text("王五")
            .fontSize(30)
        }
        ListItem() {
          Text("徐六")
            .fontSize(30)
        }
        ListItem() {
          Text("童七")
            .fontSize(30)
        }
      }

      ListItemGroup({header: this.ListHeader("三班")}) {
        ListItem() {
          Text("陈八")
            .fontSize(30)
        }
        ListItem() {
          Text("刘九")
            .fontSize(30)
        }
      }
    }
    // 建议在初始化列表时指定宽和高
    .height(200)
    .width(200)
    // 设置主轴的方向，默认为Axis.Vertical
    .listDirection(Axis.Vertical)
    // 设置交叉轴对齐方式
    .alignListItem(ListItemAlign.Center)
    // 设置滚动条
    .scrollBar(BarState.Auto)
    // 设置粘性标题
    .sticky(StickyStyle.Header)
    .backgroundColor(Color.Orange)
  }
}