线性布局（Row/Column）核心要点速览
- 基本概念
- 容器：Row（水平排列）、Column（垂直排列）。
- 主轴：Row为水平方向，Column为垂直方向。
- 交叉轴：垂直于主轴的方向（Row为垂直方向，Column为水平方向）。
- 间距控制
space属性：统一设置子元素在排列方向上的等间距。
- 主轴对齐（justifyContent）
- FlexAlign.Start：起始端对齐。
- FlexAlign.Center：居中对齐。
- FlexAlign.End：末端对齐。
- FlexAlign.SpaceBetween：首尾贴边，中间均匀分布。
- FlexAlign.SpaceAround：首尾间距为中间间距的一半。
- FlexAlign.SpaceEvenly：所有间距完全相等。
- 交叉轴对齐（alignItems/alignSelf）
- Row：
VerticalAlign.Top：顶部对齐。VerticalAlign.Center：垂直居中。VerticalAlign.Bottom：底部对齐。
- Column：
HorizontalAlign.Start：左对齐。HorizontalAlign.Center：水平居中。HorizontalAlign.End：右对齐。
alignSelf：单个子元素覆盖容器的alignItems设置。
- 自适应能力
- 拉伸：用
Blank组件填充剩余空间。 - 缩放：
layoutWeight：按权重分配主轴空间。- 百分比宽高：固定比例适配。
- 延伸：
- List+滚动条：适用于列表项过多。
- Scroll组件：包裹Row/Column实现滚动，支持垂直/水平滚动。
- 性能优化建议
- 避免过深嵌套，减少冗余节点，合理使用布局边界和渲染控制语法。
一句话总结：线性布局通过Row/Column实现水平/垂直排列，结合间距、对齐、自适应策略及滚动机制，高效构建响应式界面，需注意性能优化。
alignItems 与 alignSelf 的区别与联系
| 维度 | alignItems | alignSelf |
|---|---|---|
| 作用范围 | 统一设置容器内所有子元素在交叉轴上的对齐方式 | 单独设置某个子元素在交叉轴上的对齐方式 |
| 优先级 | 默认全局生效 | 更高优先级，覆盖父容器的 alignItems设置 |
| 使用位置 | 设置在容器组件（如 Flex/Grid 容器）上 | 设置在子元素自身 |
| 适用场景 | 批量统一对齐（如所有子元素垂直居中） | 个性化调整（如某个子元素单独底部对齐） |
| 属性值 | stretch（默认）、flex-start、center、 flex-end、baseline |
auto（继承）、stretch、flex-start、 center、flex-end、baseline |
| 布局兼容性 | 支持 Flexbox 和 Grid 布局 | 支持 Flexbox 和 Grid 布局（Grid 中更灵活） |
示例
ts
Column({ alignItems: HorizontalAlign.Center }) { // 所有子元素默认水平居中
Text('A') // 水平居中
Text('B').alignSelf(HorizontalAlign.Start) // 单独左对齐，覆盖容器的 alignItems
Text('C') // 水平居中
}总结：
alignItems是"集体规则"，alignSelf是"个人特权"。- 同时存在时，
alignSelf的优先级更高，用于局部覆盖全局设置。