「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表

List 和 Grid 是鸿蒙开发中的核心组件，用于展示动态数据。List 适合展示垂直或水平排列的数据列表，而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件，并通过按钮实现布局切换，提升界面的灵活性和用户体验。

关键词

• List 组件
• Grid 组件
• 数据展示
• 自定义列表项
• 布局切换
• 删除功能
• 动态加载

一、List 组件基础

1.1 基本用法

List 组件通过 @State 数据渲染一个基础的纵向列表。

@Entry
@Component
struct ListExample {
   
  @State items: string[] = ['Item 1', 'Item 2', 'Item 3']; // 初始化数据

  build() {
   
    Column() {
   
      List() {
   
        // 遍历数据并渲染每个列表项
        ForEach(this.items, (item: string) => {
   
          ListItem() {
   
            Text(item) // 显示文本
              .fontSize(28) // 设置字体大小
              .padding(20); // 设置内边距
          }
        });
      }
    }
    .width('100%') // 设置列宽为 100%
    .height('100%') // 设置列高为 100%
    .justifyContent(FlexAlign.Center); // 子项垂直居中对齐
  }
}

效果示例

1.2 设置列表方向

通过 listDirection 设置列表的滚动方向。

List() {
   
  ForEach(this.items, (item: string) => {
   
    ListItem