OpenHarmony列表组件怎么布局

在 OpenHarmony（ArkUI） 中，列表组件主要使用 List + ListItem，配合不同的 布局方式 来实现。下面按常见场景给你讲清楚。

一、基础列表布局（纵向）

最基础的列表形式：

List() {
  ListItem() {
    Text('Item 1')
  }
  ListItem() {
    Text('Item 2')
  }
  ListItem() {
    Text('Item 3')
  }
}

✅ 默认就是 纵向滚动列表

二、横向列表（横向滚动）

通过 listDirection 设置：

List({ space: 10 })
  .listDirection(Axis.Horizontal)
  .height(100)
{
  ListItem() {
    Text('A').width(80)
  }
  ListItem() {
    Text('B').width(80)
  }
  ListItem() {
    Text('C').width(80)
  }
}

三、列表项内部布局（重点）

ListItem 里一般用 布局容器 来排内容：

1️⃣ 左右布局（最常见）

ListItem() {
  Row() {
    Image($r('app.media.icon'))
      .width(40)
      .height(40)

    Text('标题')
      .margin({ left: 10 })
  }
  .width('100%')
  .padding(10)
}

2️⃣ 左中右布局

Row() {
  Image(...)
  Column() {
    Text('标题')
    Text('描述').fontSize(12)
  }
  .layoutWeight(1)
  .margin({ left: 10 })

  Text('>')
}
.width('100%')
.padding(10)

四、列表项高度 / 间距控制

List({ space: 12 }) {
  // ListItem
}

或：

ListItem()
  .height(60)

五、Grid 风格列表布局（类似九宫格）

如果不是“滚动列表”，而是网格，用 Grid：

Grid() {
  ForEach([1,2,3,4,5,6], (item) => {
    GridItem() {
      Text(item.toString())
    }
  })
}
.columnsTemplate('1fr 1fr 1fr')

六、配合 ForEach 动态数据

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

七、常见布局建议（实战）

八、你可以用的一句话总结

OpenHarmony 列表 = List 控制方向，ListItem 控制内容，Row/Column 控制布局

如果你有具体场景（比如：设置页 / 聊天列表 / 商品列表 / 卡片式布局），我可以直接给你完整代码示例。