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

相关推荐
lqj_本人1 小时前
鸿蒙next版开发:分析JS Crash(进程崩溃)
华为·harmonyos
Harmony_QI2 小时前
鸿蒙北向开发环境安装指南
华为·harmonyos·鸿蒙
23zhgjx-NanKon6 小时前
华为eNSP:RSTP
网络·安全·网络安全·华为
lqj_本人11 小时前
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
数码相机·华为·harmonyos
学习向前冲16 小时前
华为交换机配置默认路由
服务器·网络·华为
呆萌很18 小时前
HCIP-HarmonyOS Application Developer 习题(二十二)
harmonyos
郝晨妤19 小时前
[HarmonyOS]简单说一下鸿蒙架构
华为·架构·harmonyos·鸿蒙
二流小码农21 小时前
鸿蒙开发:ForEach中为什么键值生成函数很重要
android·ios·harmonyos
Kousi1 天前
AlphabetIndexer组件,鸿蒙开发
前端·javascript·harmonyos