鸿蒙Flex使用

以下是链接中关于 ​HarmonyOS ArkUI弹性布局(Flex)​​ 的核心内容总结:


1. 基本概念

  • 主轴:子元素的默认排列方向轴线(起始点 → 结束点)。
  • 交叉轴:垂直于主轴的轴线。
  • 主轴尺寸:子元素在主轴方向的尺寸。
  • 交叉轴尺寸:子元素在交叉轴方向的尺寸。

2. 布局方向(direction)​

  • FlexDirection.Row(默认):水平排列,从左到右。
  • FlexDirection.RowReverse:水平反向排列,从右到左。
  • FlexDirection.Column:垂直排列,从上到下。
  • FlexDirection.ColumnReverse:垂直反向排列,从下到上。

3. 布局换行(wrap)​

  • FlexWrap.NoWrap(默认):不换行,超出则压缩子元素宽度。
  • FlexWrap.Wrap:换行,按主轴方向排列多行。
  • FlexWrap.WrapReverse:换行,按主轴反方向排列。

4. 主轴对齐方式(justifyContent)​

  • FlexAlign.Start:起始端对齐(左对齐)。
  • FlexAlign.Center:居中对齐。
  • FlexAlign.End:结束端对齐(右对齐)。
  • FlexAlign.SpaceBetween:两端对齐,子元素间距相等。
  • FlexAlign.SpaceAround:子元素间距相等,首尾间距为间距一半。
  • FlexAlign.SpaceEvenly:子元素及首尾间距完全相等。

5. 交叉轴对齐方式

​(1) 容器设置(alignItems)​

  • ItemAlign.Start:顶部对齐。
  • ItemAlign.Center:居中对齐。
  • ItemAlign.End:底部对齐。
  • ItemAlign.Stretch:拉伸填充(未设尺寸时生效)。
  • ItemAlign.Baseline:文本基线对齐。

​(2) 子元素设置(alignSelf)​

  • 优先级高于容器的 alignItems,可单独覆盖对齐方式。

​(3) 多行对齐(alignContent)​

  • 控制多行布局在交叉轴的对齐方式(如 SpaceBetweenSpaceEvenly)。

6. 自适应拉伸

  • **flexBasis**:设置主轴基准尺寸(优先级高于 width/height)。
  • **flexGrow**:按比例分配父容器剩余空间。
  • **flexShrink**:按比例压缩子元素以适应空间不足。

7. 典型场景示例

scss 复制代码
Flex({
  direction: FlexDirection.Row,
  wrap: FlexWrap.NoWrap,
  justifyContent: FlexAlign.SpaceBetween, // 主轴两端对齐
  alignItems: ItemAlign.Center // 交叉轴居中
}) {
  Text('1').width('30%').height(50)
  Text('2').width('30%').height(50)
  Text('3').width('30%').height(50)
}
.height(70)
.width('90%')
.backgroundColor('#AFEEEE')

效果​:子元素水平均匀分布,垂直居中,高度固定。


关键点总结

分类 属性 作用
布局方向 direction 控制主轴方向(水平/垂直)
换行 wrap 单行/多行布局控制
主轴对齐 justifyContent 子元素在主轴的对齐方式
交叉轴对齐 alignItems 所有子元素的统一对齐方式
子元素交叉轴对齐 alignSelf 单个子元素的对齐方式(覆盖父容器设置)
自适应 flexGrow/flexShrink 分配剩余空间/压缩空间

适用场景

  • 导航栏均匀分布、卡片布局、表单排列等需要灵活控制子元素对齐与分布的界面。

此文档详细说明了 Flex 布局在 HarmonyOS ArkUI 中的完整能力,开发者可通过调整参数实现复杂响应式布局。

相关推荐
猫林老师7 小时前
HarmonyOS分布式数据库深度应用
harmonyos
LucianaiB9 小时前
【成长纪实】从“Hello World”到分布式实战的进阶之路
harmonyos·鸿蒙·成长纪实
万添裁9 小时前
基于ArkAnalyzer的HarmonyOS通用API多端安全性分析工具
harmonyos·ark
无风听海10 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
Bert丶seven10 小时前
鸿蒙Harmony实战开发教学(No.8)-Hyperlink超链接组件基础到进阶篇
华为·harmonyos·arkts·arkui·1024程序员节·开发教程
JohnnyDeng9411 小时前
ArkTs-Android 与 ArkTS (HarmonyOS) 存储目录全面对比
android·harmonyos·arkts·1024程序员节
王嘉俊92512 小时前
HarmonyOS 超级终端与服务卡片开发:打造无缝多设备交互体验
华为·架构·harmonyos·arkts·1024程序员节
俩毛豆13 小时前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
逻极16 小时前
HarmonyOS 5 鸿蒙多设备适配与分布式开发指南
分布式·华为·harmonyos·鸿蒙
爱笑的眼睛111 天前
HarmonyOS Want意图传递机制深度解析
华为·harmonyos