第7章：高级UI组件与自定义绘制

列表与网格

1. 列表组件（List）

ArkTS提供了高性能的列表组件List，用于展示垂直滚动的数据集合。

核心特性：

  • 动态渲染：仅渲染可视区域内的列表项，优化性能
  • 多种布局：支持线性布局、瀑布流等
  • 滑动事件：内置滑动监听与交互反馈
  • 复用机制：通过ListItem复用减少内存占用

基础用法示例：

@Entry
@Component
struct MyList {
  private arr: number[] = [1, 2, 3, 4, 5]

  build() {
    List({ space: 10 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text(`Item ${item}`)
            .fontSize(20)
            .width('100%')
            .textAlign(TextAlign.Center)
        }
        .borderRadius(10)
        .backgroundColor('#FFF')
        .padding(10)
      }, (item: number) => item.toString())
    }
    .width('100%')
    .height('100%')
    .divider({ strokeWidth: 2, color: '#EEE' })
  }
}

2. 网格组件（Grid）

Grid组件用于实现行列排列的网格布局，适合图片墙、商品展示等场景。

核心能力：

  • 行列配置：通过columnsTemplate和rowsTemplate定义网格结构
  • 自适应布局：支持响应式列数调整
  • 间距控制：可设置行列间距
  • 滚动支持：支持水平和垂直双向滚动

典型实现：

@Entry
@Component
struct ProductGrid {
  private products = [
    { id: 1, name: '商品A' },
    { id: 2, name: '商品B' },
    // ...更多商品数据
  ]

  build() {
    Grid() {
      ForEach(this.products, (item) => {
        GridItem() {
          Column() {
            Image($r('app.media.product'))
              .width(80)
              .height(80)
            Text(item.name)
              .margin({ top: 5 })
          }
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr') // 3列等宽
    .rowsTemplate('1fr 1fr')        // 2行等高
    .columnsGap(15)
    .rowsGap(20)
  }
}

3. 性能优化技巧

  1. 数据分页加载：

    @State private currentPage: number = 1
@State private isLoading: boolean = false

loadMore() {
  if (this.isLoading) return
  this.isLoading = true
  // 模拟异步加载
  setTimeout(() => {
    this.arr = [...this.arr, ...newData]
    this.currentPage++
    this.isLoading = false
  }, 1000)
}

  2. 复杂项组件化：

    @Component
struct ComplexItem {
  @Prop item: Product

  build() {
    // 将复杂布局封装为独立组件
  }
}

  3. 图片懒加载：

    Image(item.url)
  .onAppear(() => {
    // 触发图片加载逻辑
  })

4. 高级交互功能

  • 拖拽排序：通过onDragStart和onDrop事件实现
  • 滑动操作：配置swipeAction实现左滑删除等操作
  • 分组列表：使用ListItemGroup实现带分组的列表
  • 粘性头部：通过sticky属性实现滚动时固定头部

5. 网格布局的特殊应用

  1. 响应式网格：

    @StorageProp('windowType') windowType: string = 'phone'

build() {
  Grid() {
    // ...
  }
  .columnsTemplate(this.windowType === 'phone' ? '1fr 1fr' : '1fr 1fr 1fr 1fr')
}

  2. 瀑布流布局：

    WaterFlow({ columns: 2 }) {
  ForEach(this.items, item => {
    FlowItem() {
      // 每个元素高度可不同
    }
  })
}

最佳实践建议

  1. 避免在列表项中使用深层嵌套布局
  2. 对静态列表使用LazyForEach替代ForEach
  3. 为列表项设置固定高度或宽高比
  4. 使用cachedCount预加载可视区外的项目
  5. 复杂动画建议使用Canvas绘制替代组件动画

该内容包含：
1. 核心组件的基础用法示例
2. 性能优化具体方案
3. 交互功能实现方法
4. 响应式设计实践
5. 完整的代码片段
6. 最佳实践指导原则
7. 特殊布局场景解决方案
Last Updated::