OpenHarmony列表组件怎么适配

在 OpenHarmony（ArkTS / ArkUI）里，“列表组件适配”通常包含屏幕适配、数据适配、交互适配、性能适配几块。下面按常见场景给你一个实用清单。

一、列表组件用什么

OpenHarmony 主要用：

• List + ListItem / ListItemGroup（最常用）
• Grid / GridItem（网格列表）
• Swiper（横滑列表）

示例：

List() {
  ForEach(this.dataList, (item) => {
    ListItem() {
      Text(item.name)
    }
  })
}

二、屏幕 & 分辨率适配

1. 使用响应式单位

推荐用 vp（虚拟像素）和 fp（字体像素），系统会自动适配：

Text('标题')
  .fontSize(16) // 默认 fp
  .padding(12)  // 默认 vp

2. 根据屏幕宽度动态布局

import display from '@ohos.display'

let screenWidth = display.getDefaultDisplaySync().width

或使用：

import { mediaQuery } from '@kit.ArkUI'

let isWide = mediaQuery.matchMediaSync('(min-width: 600vp)').matches

三、不同设备形态适配

手机

• 单列 List
• 间距小、卡片化

平板 / 折叠屏

• 双列或多列

Grid() {
  ForEach(this.dataList, item => {
    GridItem() {
      Text(item.name)
    }
  })
}
.columnsTemplate('1fr 1fr')

智慧屏

• 大间距
• 焦点可见（TV 需要用 focusable、onFocus）

四、数据量大的性能适配（重点）

1. 使用 ForEach + key

ForEach(this.list, item => {
  ListItem() { ... }
}, item => item.id)

2. 懒加载（LazyForEach）

大数据必用

LazyForEach(this.dataSource, item => {
  ListItem() {
    Text(item.title)
  }
})

需要自定义 IDataSource：

class MyDataSource implements IDataSource {
  totalCount(): number
  getData(index: number): any
  registerDataChangeListener()
  unregisterDataChangeListener()
}

五、横竖屏 / 折叠屏适配

import { window } from '@kit.ArkUI'

window.on('windowSizeChange', (size) => {
  // 重新设置列数
})

或使用：

Grid().columnsTemplate(
  this.isLandscape ? '1fr 1fr 1fr' : '1fr'
)

六、交互适配

• 手机：点击
• TV：方向键 + 焦点
• 车机：大点击区域

ListItem()
  .focusable(true)
  .onFocus(() => {})
  .onBlur(() => {})

七、常见坑

❌ 不用 key 导致重渲染
❌ 万级数据用 ForEach
❌ 写死 px
❌ 平板直接复用手机布局

八、你可以告诉我

如果你能补充说明：

• 用的是 OpenHarmony 几版本
• 是 手机 / 平板 / TV / 车机
• 是 简单列表还是复杂卡片
• 是 布局适配还是性能问题

我可以给你直接可抄的代码模板。