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,性能会得到提升

相关推荐
ZZZCY20031 小时前
华为VER系统及CLI命令熟悉
华为
SameX1 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX1 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index9 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室12 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu715 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩15 小时前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
岳不谢17 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr057517 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos