4.3 常用组件详解（List、Grid、Picker等）

在鸿蒙开发中，常用组件是构建应用界面的基础工具。以下将详细介绍一些常用组件的功能及使用方法，包括 List、Grid 和 Picker 等。

4.3.1 List 组件

List 是用于显示垂直排列的数据列表组件，适合处理需要滚动显示的大量数据。

功能特点：

  • 支持动态数据绑定和更新。
  • 提供分隔线、滑动删除等功能。

使用示例：

@Entry
@Component
struct ListExample {
  build() {
    List({ space: 10 }) {
      ListItem().content("列表项1")
      ListItem().content("列表项2")
      ListItem().content("列表项3")
    }
  }
}

4.3.2 Grid 组件

Grid 组件用于构建网格布局，适合展示图片或商品卡片等需要横向排列的内容。

功能特点：

  • 支持固定列数或自适应列宽。
  • 支持行与列之间的间距设置。

使用示例：

@Entry
@Component
struct GridExample {
  build() {
    Grid({ columns: 3, space: 8 }) {
      for (let i = 1; i <= 9; i++) {
        GridItem().content("网格项" + i)
      }
    }
  }
}

4.3.3 Picker 组件

Picker 是用于选择单项或多项数据的组件，常用于时间选择、数据选择等场景。

功能特点：

  • 支持单列或多列数据选择。
  • 可配置数据源及默认值。

使用示例：

@Entry
@Component
struct PickerExample {
  @State selectedValue: string = "选项1"

  build() {
    Picker({
      range: ["选项1", "选项2", "选项3"],
      selected: 0,
      onChange: (index) => { this.selectedValue = "选项" + (index + 1) }
    })
  }
}

4.3.4 小结

常用组件如 List、Grid 和 Picker 提供了多种灵活的功能，能够满足绝大多数应用开发的需求。在实际开发中，开发者可以根据具体场景选择合适的组件并进行自定义。

Last Updated::