10. 快速上手！HarmonyOS4.0 Flex 容器组件详解
10. 快速上手！HarmonyOS4.0 Flex 容器组件详解
全栈若城
发布于 2024-05-26 09:32:21
发布于 2024-05-26 09:32:21
本章内容概要
Flex说明
以弹性方式布局子组件的容器组件。
基本概念
- 主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
- 交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。
基本使用
子组件在Flex容器上排列的方向
名称 | 描述 |
|---|---|
Row | 主轴与行方向一致作为布局模式。 |
RowReverse | 与Row方向相反方向进行布局。 |
Column | 主轴与列方向一致作为布局模式。 |
ColumnReverse | 与Column相反方向进行布局。 |
FlexDirection.Row/RowReverse
效果如下
代码如下
this.HeaderCon('基础使用(FlexDirection.Row)')
Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}
this.HeaderCon('基础使用(FlexDirection.RowReverse)')
Flex({ direction: FlexDirection.RowReverse }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}FlexDirection.Column/ColumnReverse
效果如下
代码如下
this.HeaderCon('基础使用(Column/ColumnReverse)')
Row(){
Flex({ direction: FlexDirection.Column }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}.width('50%')
Flex({ direction: FlexDirection.ColumnReverse }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
}.width('50%')
}.justifyContent(FlexAlign.SpaceBetween)Flex容器是单行/列还是多行/列排列。
名称 | 描述 |
|---|---|
NoWrap | Flex容器的元素单行/列布局，子项不允许超出容器。 |
Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
效果图如下
代码如下
this.HeaderCon('基础使用(FlexWrap.wrap)')
Flex({ wrap:FlexWrap.Wrap }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('8').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('9').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('10').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
}
this.HeaderCon('基础使用(FlexWrap.NoWrap)')
Flex({ wrap:FlexWrap.NoWrap }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('8').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('9').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('10').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
}
this.HeaderCon('基础使用(FlexWrap.WrapReverse)')
Flex({ wrap:FlexWrap.WrapReverse }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('8').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('9').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('10').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
}所有子组件在Flex容器主轴上的对齐格式
名称 | 描述 |
|---|---|
Start | 元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
End | 元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。 |
SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。 |
SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
SpaceEvenly | Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
效果图
代码如下
this.HeaderCon('基础使用(justifyContent)')
Text('FlexAlign.Start').fontSize(25)
Flex({justifyContent:FlexAlign.Start}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.Center').fontSize(25)
Flex({justifyContent:FlexAlign.Center}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.End').fontSize(25)
Flex({justifyContent:FlexAlign.End}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.SpaceBetween').fontSize(25)
Flex({justifyContent:FlexAlign.SpaceBetween}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.SpaceAround').fontSize(25)
Flex({justifyContent:FlexAlign.SpaceAround}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('FlexAlign.SpaceBetween').fontSize(25)
Flex({justifyContent:FlexAlign.SpaceBetween}){
Text('1').width('20%').height(100).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}所有子组件在Flex容器交叉轴上的对齐格式
名称 | 描述 |
|---|---|
Auto | 使用Flex容器中默认配置。 |
Start | 元素在Flex容器中，交叉轴方向首部对齐。 |
Center | 元素在Flex容器中，交叉轴方向居中对齐。 |
End | 元素在Flex容器中，交叉轴方向底部对齐。 |
Stretch | 元素在Flex容器中，交叉轴方向拉伸填充。容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时，元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况在元素未设置尺寸时，拉伸到容器尺寸。 |
效果图
代码如下
this.HeaderCon('基础使用(alignItems)')
Text('ItemAlign.Auto').fontSize(25)
Flex({alignItems:ItemAlign.Auto}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.Start').fontSize(25)
Flex({alignItems:ItemAlign.Start}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.Center').fontSize(25)
Flex({alignItems:ItemAlign.Center}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.End').fontSize(25)
Flex({alignItems:ItemAlign.End}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}
Text('ItemAlign.Stretch').fontSize(25)
Flex({alignItems:ItemAlign.Stretch}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.width('100%')
Text('ItemAlign.Baseline').fontSize(25)
Flex({alignItems:ItemAlign.Baseline}){
Text('1').width('20%').height(40).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(100).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(100).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.width('100%')交叉轴中有额外的空间时，多行内容的对齐方式
注意： 仅在wrap为Wrap或WrapReverse下生效。
效果图如下
FlexAlign.Start | |
|---|---|
FlexAlign.Center | |
FlexAlign.End | |
FlexAlign.SpaceBetween | |
FlexAlign.SpaceAround | |
FlexAlign.SpaceEvenly |
参数讲解
名称 | 描述 |
|---|---|
Start | 元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
End | 元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。 |
SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。 |
SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
SpaceEvenly | Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
代码展示
this.HeaderCon('基础使用(alignContent)')
Text('FlexAlign.Start').fontSize(25)
Flex({alignContent:FlexAlign.Start, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.height(100).backgroundColor('#e4e4e4')
Text('FlexAlign.Center').fontSize(25)
Flex({alignContent:FlexAlign.Center, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(80).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(100).backgroundColor('#e3e3e3')
Text('FlexAlign.End').fontSize(25)
Flex({alignContent:FlexAlign.End, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
}.height(100).backgroundColor('#e5e5e5')
Text('FlexAlign.SpaceBetween').fontSize(25)
Flex({alignContent:FlexAlign.SpaceBetween, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(400).backgroundColor('#e6e6e6')
Text('FlexAlign.SpaceAround').fontSize(25)
Flex({alignContent:FlexAlign.SpaceAround, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(400).backgroundColor('#e7e7e7')
Text('FlexAlign.SpaceEvenly').fontSize(25)
Flex({alignContent:FlexAlign.SpaceEvenly, wrap:FlexWrap.Wrap}){
Text('1').width('20%').height(30).backgroundColor('#f00').fontSize(25).textAlign(TextAlign.Center)
Text('2').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
Text('3').width('20%').height(30).backgroundColor('#00f').fontSize(25).textAlign(TextAlign.Center)
Text('4').width('20%').height(30).backgroundColor('#f0f').fontSize(25).textAlign(TextAlign.Center)
Text('5').width('20%').height(30).backgroundColor('#0ff').fontSize(25).textAlign(TextAlign.Center)
Text('6').width('20%').height(30).backgroundColor('#ff0').fontSize(25).textAlign(TextAlign.Center)
Text('7').width('20%').height(30).backgroundColor('#0f0').fontSize(25).textAlign(TextAlign.Center)
}.height(400).backgroundColor('#e8e8e8')本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。