HarmonyOS Flex布局

前置知识:

  • 一次开发,多端部署:一套代码工程,一次开发上架,多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验
  • 自适应布局:当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。常见的自适应布局有:线性布局、层叠布局、弹性布局、相对布局等。自适应布局能力可以实现界面显示随外部容器大小连续变化
  • 响应式布局:当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。
  • Navigation:页面根容器,一般用于分栏布局场景使用。

Flex布局:

提供了更加灵活和有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。广泛应用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等场景

  1. 主轴和交叉轴
    1. 主轴:Flex布局的主轴是水平方向(默认)或垂直方向(通过设置方向),子元素默认沿主轴排列
    2. 交叉轴:垂直于主轴的轴线,用于设置子元素在交叉轴方向的对齐方式
  2. 布局方向
    1. 默认方向:主轴为水平方向(FlexDirection.Row),子元素从起始端沿着水平方向开始排布
    2. 其他方向:可以通过设置方向参数(如FlexDirection.RowReverse、FlexDirection.Column、FlexDirection.ColumnReverse)来改变主轴方向
  3. 布局换行
    1. 单行布局:子元素在主轴方向上的尺寸之和小于容器的主轴尺寸时,所有子元素在同一行排列
    2. 多行布局:子元素在主轴方向上的尺寸之和大于容器的主轴尺寸时,容器会换行,每一行子元素按照主轴方向排列
    3. wrap属性:控制多行布局时的换行方式,包括FlexWrap.NoWrap(默认值)、FlexWrap.Wrap和FlexWrap.WrapReverse
  4. 主轴对齐方式
    1. 对齐方式:可以通过justifyContent参数设置子元素在主轴方向上的对齐方式,包括FlexAlign.Start、FlexAlign.Center、FlexAlign.End和FlexAlign.SpaceBetween等
  5. 交叉轴对齐方式
    1. 对齐方式:可以通过alignItems参数设置子元素在交叉轴方向上的对齐方式,包括ItemAlign.Auto、ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch、ItemAlign.Baseline和ItemAlign.End
  6. 自适应拉伸
    1. 通过设置子元素的flexBasisflexGrow属性,可以实现子元素的自适应布局 flexBasis设置子元素在主轴方向上的基准尺寸,flexGrow设置子元素在主轴方向上分配剩余空间的比例。flexShrink:设置子元素在主轴方向上压缩的比例

建议使用Column/Row替代Flex,性能会得到提升

相关推荐
coder_pig8 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶8 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
二二孚日9 小时前
自用华为ICT云赛道Big Data第五章知识点-Flume海量日志聚合
大数据·华为
前端世界9 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor10 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
二二孚日11 小时前
自用华为ICT云赛道Big Data第四章知识点-Flink流批一体分布式实时处理引擎
大数据·华为
zhanshuo11 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore11 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo11 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手12 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态