HarmonyOS:线性布局（Row/Column）

最新推荐文章于 2025-11-21 18:59:22 发布

原创最新推荐文章于 2025-11-21 18:59:22 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #harmonyos #华为

鸿蒙HarmonyOS 专栏收录该内容

15 篇文章

订阅专栏

✅ 概述总结

线性布局是界面开发中最基础、最常用的布局方式，通过 Row（水平）和 Column（垂直）容器实现子元素的有序排列。它支持灵活的对齐、间距设置与自适应布局，适用于构建结构清晰的 UI。

🧭 核心概念一览表

概念	说明
主轴	子元素排列方向： • `Row` → 水平（➡️） • `Column` → 垂直（⬇️）
交叉轴	与主轴垂直的方向： • `Row` → 垂直 • `Column` → 水平
space	设置主轴上相邻子元素之间的等间距
justifyContent	主轴对齐方式（6种）
alignItems	交叉轴对齐方式（Start / Center / End）
alignSelf	单个子元素覆盖 `alignItems` 的对齐设置
Blank	自动填充主轴空白空间，实现拉伸效果
layoutWeight	按权重分配主轴剩余空间
百分比宽度	固定占比，响应不同屏幕尺寸

🔖 主轴对齐方式：`justifyContent`

对齐方式	图解示意	说明
`FlexAlign.Start`	🔳 🔳 🔳 ⠀⠀→	起始端对齐，首个元素贴边
`FlexAlign.Center`	→ 🔳 🔳 🔳 ←	居中对齐，前后留白相等
`FlexAlign.End`	← 🔳 🔳 🔳	尾部对齐，末尾元素贴边
`SpaceBetween`	🔳 🔳 🔳	首尾贴边，中间间距均等
`SpaceAround`	⠀ 🔳 🔳 🔳	元素周围间距相等，首尾为半距
`SpaceEvenly`	🔳 🔳 🔳	所有间距完全一致（含首尾）

🎯 交叉轴对齐方式：`alignItems`

容器类型	对齐属性	图解	说明
Column (主轴: 垂直)	`HorizontalAlign.Start`	← 🔳 🔳 🔳	左对齐
	`HorizontalAlign.Center`	🔳 🔳 🔳	水平居中
	`HorizontalAlign.End`	🔳→ 🔳 🔳	右对齐
Row (主轴: 水平)	`VerticalAlign.Top`	🔳 🔳 🔳 ↑	顶部对齐
	`VerticalAlign.Center`	🔳 🔳 🔳 ↓	垂直居中
	`VerticalAlign.Bottom`	↓ 🔳 🔳 🔳	底部对齐

💡 alignSelf 可单独设置某子元素的对齐方式，优先级高于 alignItems

🌟 自适应布局三大技巧

1. 自适应拉伸 —— 使用 `Blank`

Row() {
  Text('Bluetooth')
  Blank() // 自动填充空白
  Toggle({ type: ToggleType.Switch })
}
.width('100%')

2. 自适应缩放 —— `layoutWeight`

Row() {
  Column().layoutWeight(1).backgroundColor(0xF5DEB3)
  Column().layoutWeight(2).backgroundColor(0xD2B48C)
  Column().layoutWeight(3).backgroundColor(0xF5DEB3)
}.height('30%')

📊 比例分配主轴空间： 1:2:3 → 占比分别为 1/6, 2/6, 3/6
🖼️ 图示：[🔳] [███] [█████]（按权重扩展）

3. 百分比布局 —— 固定占比

Row() {
  Column().width('20%').backgroundColor(0xF5DEB3)
  Column().width('50%').backgroundColor(0xD2B48C)
  Column().width('30%').backgroundColor(0xF5DEB3)
}

📏 固定宽度比例：始终为 2:5:3，响应屏幕变化
🖼️ 图示：[%%] [%%%%%] [%%%]

4. 自适应延伸 —— 滚动支持

✅ 垂直滚动（Column + Scroll）

Scroll(this.scroller) {
  Column() {
    ForEach(this.arr, (item) => {
      Text(item.toString()).width('90%').height(150).margin({ top: 10 })
    })
  }
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.edgeEffect(EdgeEffect.Spring)

✅ 水平滚动（Row + Scroll）

Scroll(this.scroller) {
  Row() {
    ForEach(this.arr, (item) => {
      Text(item.toString()).height('90%').width(150).margin({ left: 10 })
    })
  }
}
.scrollable(ScrollDirection.Horizontal)

📌 支持滚动条常驻、颜色、宽度及回弹效果设置。