当前位置：首页 > news >正文

HarmonyOS:弹性布局（Flex）

news 2025/11/11 14:04:23

学习目标

掌握弹性布局的基本概念、核心属性及其在实际开发中的应用，能够熟练使用 Flex 实现常见页面布局。

一、弹性布局概述

弹性布局（Flex）是一种高效的容器布局方式，用于对子元素进行排列、对齐和空间分配。
适用于：导航栏均分、页面框架搭建、多行数据排布等响应式场景。

核心思想：通过主轴与交叉轴控制子元素的排列方向与对齐方式。

二、基本概念图解

主轴与交叉轴关系示意图

概念	含义说明
主轴 (Main Axis)	子元素排列的方向轴（由 `direction` 决定）
主轴起始/结束点	子元素开始/结束排列的位置
交叉轴 (Cross Axis)	垂直于主轴的轴线
交叉轴起始/结束点	交叉轴上的起点和终点

📌 默认主轴为水平方向（Row），交叉轴为垂直方向。

三、布局方向（direction）

方向	描述	示例代码
`FlexDirection.Row`（默认）	水平从左到右	`Flex({ direction: FlexDirection.Row })`
`FlexDirection.RowReverse`	水平从右到左	`Flex({ direction: FlexDirection.RowReverse })`
`FlexDirection.Column`	垂直从上到下	`Flex({ direction: FlexDirection.Column })`
`FlexDirection.ColumnReverse`	垂直从下到上	`Flex({ direction: FlexDirection.ColumnReverse })`

可视化对比图

四、换行设置（wrap）

属性值	行为描述
`FlexWrap.NoWrap`（默认）	不换行，子元素压缩宽度
`FlexWrap.Wrap`	换行，新行沿交叉轴正方向排列
`FlexWrap.WrapReverse`	换行，新行沿交叉轴反方向排列

⚠️ 多行布局时才体现 alignContent 的作用。

五、主轴对齐方式（justifyContent）

对齐方式	效果说明	公式示意
`FlexAlign.Start`（默认）	起始端对齐	——
`FlexAlign.Center`	居中对齐	——
`FlexAlign.End`	终点端对齐	——
`FlexAlign.SpaceBetween`	两端对齐，间距相等	首尾贴边，中间等距
`FlexAlign.SpaceAround`	间隔环绕	边距 = 半间距
`FlexAlign.SpaceEvenly`	完全等距	所有间距相同

六、交叉轴对齐方式

6.1 容器级对齐（alignItems）

属性值	说明
`ItemAlign.Auto`	使用默认配置
`ItemAlign.Start`	顶部对齐
`ItemAlign.Center`	居中对齐
`ItemAlign.End`	底部对齐
`ItemAlign.Stretch`	拉伸填满（无高度时生效）
`ItemAlign.Baseline`	文本基线对齐

6.2 子元素级对齐（alignSelf）

优先级高于 alignItems
单个子元素可覆盖父容器设定

Flex({ alignItems: ItemAlign.Center }) {Text('顶部').alignSelf(ItemAlign.Start) // 覆盖居中 → 顶部
}

七、多行内容对齐（alignContent）

仅在 wrap 换行时有效，控制多行之间的垂直分布。

alignContent 值	效果
`Start`	多行靠上对齐
`Center`	多行居中
`End`	多行靠下
`SpaceBetween`	上下行贴边，中间等距
`SpaceAround`	行间距为边距两倍
`SpaceEvenly`	所有间距完全相等

八、自适应拉伸属性

8.1 flexBasis：主轴基准尺寸

相当于“初始宽度”
优先级高于 width/height

设置情况	实际尺寸
未设 width，flexBasis=“auto”	内容自身宽度
设 width，flexBasis=“auto”	使用 width 值
设 flexBasis(100)	固定为 100vp

最终尺寸=flexBasis(若存在)

8.2 flexGrow：扩展比例

用于分配剩余空间

8.3 flexShrink：收缩比例

当空间不足时，按比例压缩

压缩比：3 : 2 → 总份 5

九、典型应用场景代码示例

实现：水平排列、两端对齐、垂直居中

Flex({direction: FlexDirection.Row,justifyContent: FlexAlign.SpaceBetween,alignItems: ItemAlign.Center
}) {Text('左侧').width('30%').height(50).backgroundColor('#F5DEB3')Text('中间').width('30%').height(50).backgroundColor('#D2B48C')Text('右侧').width('30%').height(50).backgroundColor('#F5DEB3')
}
.height(70)
.width('90%')
.backgroundColor('#AFEEEE')