前置知识:
- 一次开发,多端部署:一套代码工程,一次开发上架,多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验
- 自适应布局:当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。常见的自适应布局有:线性布局、层叠布局、弹性布局、相对布局等。自适应布局能力可以实现界面显示随外部容器大小连续变化
- 响应式布局:当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。
- Navigation:页面根容器,一般用于分栏布局场景使用。
Flex布局:
提供了更加灵活和有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。广泛应用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等场景
- 主轴和交叉轴
- 主轴:Flex布局的主轴是水平方向(默认)或垂直方向(通过设置方向),子元素默认沿主轴排列
- 交叉轴:垂直于主轴的轴线,用于设置子元素在交叉轴方向的对齐方式
- 布局方向
- 默认方向:主轴为水平方向(FlexDirection.Row),子元素从起始端沿着水平方向开始排布
- 其他方向:可以通过设置方向参数(如FlexDirection.RowReverse、FlexDirection.Column、FlexDirection.ColumnReverse)来改变主轴方向
- 布局换行
- 单行布局:子元素在主轴方向上的尺寸之和小于容器的主轴尺寸时,所有子元素在同一行排列
- 多行布局:子元素在主轴方向上的尺寸之和大于容器的主轴尺寸时,容器会换行,每一行子元素按照主轴方向排列
- wrap属性:控制多行布局时的换行方式,包括FlexWrap.NoWrap(默认值)、FlexWrap.Wrap和FlexWrap.WrapReverse
- 主轴对齐方式
- 对齐方式:可以通过justifyContent参数设置子元素在主轴方向上的对齐方式,包括FlexAlign.Start、FlexAlign.Center、FlexAlign.End和FlexAlign.SpaceBetween等
- 交叉轴对齐方式
- 对齐方式:可以通过alignItems参数设置子元素在交叉轴方向上的对齐方式,包括ItemAlign.Auto、ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch、ItemAlign.Baseline和ItemAlign.End
- 自适应拉伸
- 通过设置子元素的
flexBasis
和flexGrow
属性,可以实现子元素的自适应布局flexBasis
设置子元素在主轴方向上的基准尺寸,flexGrow
设置子元素在主轴方向上分配剩余空间的比例。flexShrink
:设置子元素在主轴方向上压缩的比例
- 通过设置子元素的
建议使用Column/Row替代Flex,性能会得到提升