HarmonyOS中ArkUI的Column、Row、Flex、Stack，及其常用属性学习记录

鸿蒙的 ArkUI 框架通过多种容器组件实现灵活布局，包括 Column （纵向布局）、Row （横向布局）、Flex （弹性布局）和 Stack （层叠布局）。其中 Column 、Row 为线性布局，效率相对较高，在开发过程中，可以根据布局特点选择适当的组件。

一、Column 与 Row：线性布局

功能：

Column 沿垂直方向排列子组件，主轴为纵向，交叉轴为横向。
Row 沿水平方向排列子组件，主轴为横向，交叉轴为纵向。

开发过程中，核心要考虑主轴和交叉轴 ，区分出主轴和交叉轴，在设计布局时更得心应手。

常用属性：

主轴对齐（justifyContent）：
- FlexAlign.Start（默认）：子组件从主轴起点排列。
- FlexAlign.Center：居中对齐。
- FlexAlign.End：子组件从主轴结束点排列。
- FlexAlign.SpaceBetween：子组件均匀分布，首尾顶格。
- FlexAlign.SpaceEvenly：子组件及首尾间距均等。
交叉轴对齐（alignItems）：
- Column 中为 HorizontalAlign（水平对齐），如 Start（左对齐）、Center（居中）、End（右对齐）。
- Row 中为 VerticalAlign（垂直对齐），如 Top（顶部对齐）、Center（垂直居中）。
间距控制（space）：
- 设置子组件在主轴方向的间距，如 Row({ space: 20 }) 使水平排列的组件间隔 20vp。

示例代码：

typescript 复制代码

// Column 垂直居中排列，子组件间隔20vp
Column({ space: 20 }) {
  Text('Item 1').width('90%').height(40)
  Text('Item 2').width('90%').height(40)
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)

以上仅用于参考，在DevEco-Studio中可以利用编辑器的代码提示功能，直接选择适合布局的属性即可。

二、Flex：弹性布局

功能：

继承自 Column和Row，支持更灵活的排列方向（如反向排列）和动态尺寸分配。
可结合Expanded组件按比例分配剩余空间。

核心属性：

排列方向（flexDirection）：
- FlexDirection.Row（水平）、RowReverse（水平反向）。
- FlexDirection.Column（垂直）、ColumnReverse（垂直反向）。
换行控制（flexWrap）：
- FlexWrap.NoWrap：默认不自动换行。
- FlexWrap.Wrap：子组件超出容器宽度时自动换行。
- FlexWrap.WrapReverse：反向换行，从底部开始排列。
权重分配（flex）：
- 通过 Expanded 的 flex 属性分配比例空间，如 Expanded(flex: 2) 占两倍剩余空间。

示例代码：

typescript 复制代码

// Flex 横向排列，子组件按比例分配空间
Flex({ direction: FlexDirection.Row }) {
  Expanded(flex: 1, child: Text('Item 1').backgroundColor(0xAFEEEE))
  Expanded(flex: 2, child: Text('Item 2').backgroundColor(0x00FFFF))
}
.width('90%')
.justifyContent(FlexAlign.SpaceEvenly)

三、Stack：层叠布局

功能：

子组件按添加顺序层叠显示，常用于浮动按钮、弹窗或重叠元素。

常用属性：

对齐方式（alignContent）：
- Alignment.TopStart（左上对齐）、Alignment.Center（居中）。
- 可自定义偏移量，如 Alignment(0.5, 0.8) 定位到容器中下区域。
子组件定位（position）：
- 通过 position 属性设置绝对定位，如 { x: 10, y: 20 }。

示例代码：

typescript 复制代码

// Stack 层叠布局，文字居中，按钮右下角浮动
Stack() {
  Text('背景内容').fontSize(20)
  Button('悬浮按钮')
    .width(60)
    .height(60)
    .position({ x: '90%', y: '80%' }) // 相对父容器定位
}
.width('100%').height(200)

四、通用布局约束属性

以下属性适用于所有容器组件：

matchParent ：组件尺寸匹配父容器（如 .width('100%')）。
wrapContent：尺寸根据内容自适应。
margin ：设置外边距，如 .margin({ top: 20 }的)。
padding ：设置内边距，如 .padding({ top: 20 })。

五、应用场景与优化建议

响应式布局：
- 使用 Flex 和 Expanded 按比例分配空间，适配不同屏幕尺寸。
- space 和 justifyContent 实现动态间距调整。
性能优化：
- 减少嵌套层级，优先使用 Row/Column 替代多层 Flex。
- 对长列表使用 LazyForEach 懒加载，避免内存溢出。
复杂交互：
- Stack 结合动画实现弹窗动态弹出效果。
- Flex 的 flexWrap 支持多行排列，适用于瀑布流布局。

总结归纳：

Column/Row 适用于简单线性排列，justifyContent 和 alignItems 控制对齐。
Flex 提供更灵活的排列方向和动态尺寸分配，适合复杂布局。
Stack 用于层叠元素，结合定位实现悬浮效果。

后续会继续学习，总结分享。