OpenHarmony列表组件怎么适配屏幕

在 OpenHarmony（ArkUI） 中，列表组件（如 List、Grid）适配屏幕，核心思路是 使用相对布局 / 弹性布局 / 百分比 / 断点适配，避免写死尺寸。下面按常见场景说明。

一、List 基础适配（推荐方式）

1️⃣ 使用 width('100%') 充满屏幕

List() {
  // list items
}
.width('100%')
.height('100%')

✅ 列表宽度跟随父容器
✅ 自动适配不同分辨率

2️⃣ 使用 layoutWeight 占满剩余空间

Column() {
  Text('标题').fontSize(20)

  List() {
    // items
  }
  .layoutWeight(1)
}
.width('100%')
.height('100%')

✅ 列表自动占据剩余高度
✅ 常用于“顶部固定 + 底部列表”

二、ListItem 适配

3️⃣ ListItem 使用百分比或弹性布局

ListItem() {
  Row() {
    Text('名称').layoutWeight(1)
    Text('详情')
  }
  .width('100%')
  .padding(10)
}

✅ 左右自适应
✅ 避免固定 px

三、不同屏幕尺寸适配（断点）

4️⃣ 使用媒体查询（推荐）

import mediaquery from '@ohos.mediaquery'

let isWide = false

mediaquery.matchMediaSync('(min-width: 600px)').on('change', (m) => {
  isWide = m.matches
})

List() {
  // items
}
.columns(isWide ? 2 : 1)

✅ 手机 1 列，平板 2 列
✅ 官方推荐做法

5️⃣ Grid 列表适配（多列）

Grid() {
  // grid items
}
.columnsTemplate(isWide ? '1fr 1fr' : '1fr')
.width('100%')

✅ 使用 fr 自适应列宽
✅ 非常适合卡片列表

四、安全区域 & 刘海屏适配

6️⃣ 使用安全区域

List()
  .width('100%')
  .padding({ top: 10, bottom: 10 })
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

✅ 避免被状态栏 / 导航条遮挡

五、常见错误 ❌

❌ 写死宽度

.width(360)

❌ 写死高度

.height(800)

❌ 不设置父容器宽高

六、推荐最佳实践 ✅

✅ 父容器用 Column / Row
✅ 列表用 width('100%')
✅ 剩余空间用 layoutWeight
✅ 多列用 columns + fr
✅ 大屏用 mediaquery

如果你有 具体场景（如：手机/平板、横竖屏、聊天列表、商品列表），我可以给你一份完整示例代码。