OpenHarmony列表组件怎样适配

在 OpenHarmony（ArkUI）里，“列表组件”通常指 List / Grid / WaterFlow 等可滚动容器。所谓“适配”，一般包含以下几类场景。下面按常见需求给你一套实用说明。

一、屏幕与分辨率适配（不同设备）

1️⃣ 使用响应式单位

• vp（虚拟像素，自动按屏幕密度缩放）✅ 推荐
• fp（字体像素，随系统字体大小变化）
• 避免写死 px

List() {
  ...
}
.width('100%')
.padding({ left: 16, right: 16 })

2️⃣ 使用媒体查询（不同屏幕尺寸）

import mediaquery from '@ohos.mediaquery'

let mq = mediaquery.matchMediaSync('(min-width: 600vp)')
mq.on('change', (result) => {
  // 平板 / 手机不同布局
})

二、List 列表适配常见方式

1️⃣ List 自适应宽度

List() {
  ForEach(this.data, item => {
    ListItem() {
      Text(item)
    }
  })
}
.width('100%')

2️⃣ 横向 / 纵向适配

List({ space: 12 }) {
  ...
}
.listDirection(Axis.Horizontal)

3️⃣ 分栏适配（手机 / 平板）

Grid() {
  ForEach(this.data, item => {
    GridItem() {
      Text(item)
    }
  })
}
.columnsTemplate(
  this.isPad ? '1fr 1fr 1fr' : '1fr'
)

三、瀑布流（WaterFlow）适配

WaterFlow() {
  ForEach(this.data, item => {
    FlowItem() {
      Text(item)
    }
  })
}
.columnsTemplate(
  this.isPad ? '1fr 1fr 1fr' : '1fr 1fr'
)

✅ 非常适合图片流、商品列表

四、状态栏 / 安全区适配

import window from '@ohos.window'

window.getLastWindow(getContext()).then(win => {
  win.setWindowLayoutFullScreen(true)
})

列表顶部留白：

List()
.padding({ top: 20 })

五、暗黑模式适配

Text('列表')
.fontColor($r('app.color.text_primary'))

resources 中配置：

• color.json
• dark/color.json

六、性能与长列表适配（非常重要）

✅ 使用 LazyForEach

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

✅ 设置 cachedCount

List() {
  ...
}
.cachedCount(5)

七、常见坑提醒

❌ 不要写死高度
✅ 使用 layoutWeight / flex
❌ 不要在 List 里嵌套 Scroll
✅ 列表内部用 ListItem

八、如果你愿意，我可以更具体帮你

你可以告诉我：

1. 用的是 ArkTS / JS / eTS？
2. 是 List / Grid / WaterFlow？
3. 适配目标是 手机+平板 / 折叠屏 / 车机？

我可以直接给你可运行示例代码。