HarmonyOS:线性布局（Row/Column）

✅ 概述总结

线性布局是界面开发中最基础、最常用的布局方式，通过 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

TypeScript 复制代码

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

2. 自适应缩放 ------ layoutWeight

TypeScript 复制代码

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. 百分比布局 ------ 固定占比

TypeScript 复制代码

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

📏 固定宽度比例：始终为 2:5:3，响应屏幕变化

🖼️ 图示： $%%$ $%%%%%$ $%%%$

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

✅ 垂直滚动（Column + Scroll）

TypeScript 复制代码

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）

TypeScript 复制代码

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

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

📚 知识点详解

主轴与交叉轴：主轴决定排列方向，交叉轴用于对齐控制。理解二者关系是布局核心。
justifyContent 与 alignItems：分别控制主轴和交叉轴对齐行为，影响整体布局结构。
自适应策略（Blank/layoutWeight/百分比）：根据场景选择合适方式实现跨设备兼容性。

⚠️ 提示：避免过度嵌套以提升性能，合理使用边界约束与渲染优化语法。