devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙HarmonyOS实战-ArkUI组件（Flex）_鸿蒙flex main axis

作者：小丑西瓜9 | 2024-03-20 01:06:22

赞

踩

鸿蒙flex main axis

一、Flex

1.概述

Flex布局它可以让容器中的子元素具有弹性伸缩性。Flex布局是一种二维布局模型，它可以在任意方向上对元素进行排列，并且可以动态地调整元素的大小和位置，以适应不同的屏幕尺寸和设备。通过使用Flex布局，我们可以实现响应式布局效果，以适应不同的屏幕尺寸和设备。Flex布局主要由容器和项目两个部分组成，容器是需要进行布局的元素，项目是容器中的每个子元素。

在这里插入图片描述

主轴是Flex容器的主要方向，也是子元素排列的方向，通常设置为水平方向。在Flex布局中，主轴的起点和终点分别为JustifyContent属性所设置的对齐方式所表示的位置。

交叉轴则与主轴垂直，通常设置为垂直方向。在Flex布局中，交叉轴与主轴方向相反，它的起点和终点分别是AlignContent属性所设置的对齐方式所表示的位置。

2.布局方向

在Flex弹性布局中，主轴和交叉轴的方向可以通过FlexDirection属性来进行设置。常见的值包括：Row（主轴方向为水平向右）、RowReverse（主轴方向为水平向左）、Column（主轴方向为垂直向下）和ColumnReverse（主轴方向为垂直向上）。

在这里插入图片描述

2.1 FlexDirection.Row

主轴为水平方向，子组件从起始端沿着水平方向开始排布。

  1. Flex({ direction: FlexDirection.Row }) {
  2.   Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .height(70)
  7. .width('90%')
  8. .padding(10)
  9. .backgroundColor(0xAFEEEE)

在这里插入图片描述

2.2 FlexDirection.RowReverse

主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。

  1. Flex({ direction: FlexDirection.RowReverse }) {
  2.   Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .height(70)
  7. .width('90%')
  8. .padding(10)
  9. .backgroundColor(0xAFEEEE)

在这里插入图片描述

2.3 FlexDirection.Column

主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。

  1. Flex({ direction: FlexDirection.Column }) {
  2.   Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
  4.   Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .height(70)
  7. .width('90%')
  8. .padding(10)
  9. .backgroundColor(0xAFEEEE)

在这里插入图片描述

2.4 FlexDirection.ColumnReverse

主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。

  1. Flex({ direction: FlexDirection.ColumnReverse }) {
  2.   Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
  4.   Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .height(70)
  7. .width('90%')
  8. .padding(10)
  9. .backgroundColor(0xAFEEEE)

在这里插入图片描述

2.布局换行

Flex弹性布局的换行是指将一行上的元素，在到达父容器的边界时换到下一行继续排列。这可以通过控制flex-wrap属性来实现。FlexWrap属性有三个值：

  1. Nowrap（默认值）：不换行，将所有元素排在同一行上。

  2. Wrap：换行，当一行排满后，将元素放置到下一行上。

  3. WrapReverse：倒序换行，当一行排满后，将元素从下一行上开始排列。

比如，设置FlexWrap: Wrap;可以让元素在父容器的边界处换行，从而实现响应式布局。

2.1 FlexWrap.NoWrap

不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。

  1. Flex({ wrap: FlexWrap.NoWrap }) {
  2.   Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  4.   Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
  5. } 
  6. .width('90%')
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

2.2 FlexWrap.Wrap

换行，每一行子组件按照主轴方向排列。

  1. Flex({ wrap: FlexWrap.Wrap }) {
  2.   Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  4.   Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
  5. } 
  6. .width('90%')
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

2.3 FlexWrap. WrapReverse

换行，每一行子组件按照主轴反方向排列。

  1. Flex({ wrap: FlexWrap.WrapReverse}) {
  2.   Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  4.   Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .width('90%')
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

3.对齐方式

3.1 主轴对齐方式

在这里插入图片描述
Flex弹性布局的主轴对齐方式有以下几种：

  1. justifyContent: FlexAlign.Start：默认值，主轴开始端对齐；
  2. justifyContent: FlexAlign.End：主轴结束端对齐；
  3. justifyContent: FlexAlign.Center：主轴居中对齐；
  4. justifyContent: FlexAlign.SpaceBetween：元素之间平均分布，首尾元素与容器边框之间无空隙；
  5. justifyContent: FlexAlign.SpaceAround：元素平均分布，各元素周围留有相等的空隙；
  6. justifyContent: FlexAlign.SpaceEvenly：元素平均分布，每个元素周围留有相等的空隙，首尾元素距离容器边框的距离是其他元素的两倍。
☀️3.1.1 FlexAlign.Start

子组件在主轴方向起始端对齐， 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。

  1. Flex({ justifyContent: FlexAlign.Start }) {  
  2.   Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  3.   Text('2').width('20%').height(50).backgroundColor(0xD2B48C)    
  4.   Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .width('90%')
  7. .padding({ top: 10, bottom: 10 })
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.1.2 FlexAlign.Center

子组件在主轴方向居中对齐。

  1. Flex({ justifyContent: FlexAlign.Center }) {  
  2.   Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
  4.   Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .width('90%')
  7. .padding({ top: 10, bottom: 10 })
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.1.3 FlexAlign.End

子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。

  1. Flex({ justifyContent: FlexAlign.End }) {  
  2.   Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
  4.   Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .width('90%')
  7. .padding({ top: 10, bottom: 10 })
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.1.4 FlexAlign.SpaceBetween

Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。

  1. Flex({ justifyContent: FlexAlign.SpaceBetween }) {  
  2.   Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
  4.   Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .width('90%')
  7. .padding({ top: 10, bottom: 10 })
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.1.5 FlexAlign.SpaceAround

Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。

  1. Flex({ justifyContent: FlexAlign.SpaceAround }) {  
  2.   Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
  4.   Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .width('90%')
  7. .padding({ top: 10, bottom: 10 })
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.1.6 FlexAlign.SpaceEvenly

Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。

  1. Flex({ justifyContent: FlexAlign.SpaceEvenly }) {  
  2.   Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
  4.   Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .width('90%')
  7. .padding({ top: 10, bottom: 10 })
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

3.2 交叉轴对齐方式

Flex弹性布局的交叉轴对齐方式包括以下几种：

  1. ItemAlign.Start：交叉轴起点对齐；
  2. ItemAlign.Center：交叉轴中点对齐；
  3. ItemAlign.End：交叉轴终点对齐；
  4. ItemAlign. Baseline：以第一行文字的基线对齐；
  5. ItemAlign.Stretch：默认值，每个子元素都延伸到交叉轴的相同大小。
☀️3.2.1 ItemAlign.Auto

使用Flex容器中默认配置。

  1. Flex({ alignItems: ItemAlign.Auto }) {  
  2.   Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .size({ width: '90%', height: 80 })
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.2.2 ItemAlign.Start

交叉轴方向首部对齐

  1. Flex({ alignItems: ItemAlign.Start }) {  
  2.   Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .size({ width: '90%', height: 80 })
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.2.3 ItemAlign.Center

交叉轴方向居中对齐

  1. Flex({ alignItems: ItemAlign.Center }) {  
  2.   Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .size({ width: '90%', height: 80 })
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.2.4 ItemAlign.End

交叉轴方向底部对齐

  1. Flex({ alignItems: ItemAlign.End }) {  
  2.   Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .size({ width: '90%', height: 80 })
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.2.5 ItemAlign.Stretch

交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

  1. Flex({ alignItems: ItemAlign.Stretch}) {  
  2.   Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .size({ width: '90%', height: 80 })
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.2.6 ItemAlign.Baseline

交叉轴方向文本基线对齐

  1. Flex({ alignItems: ItemAlign.Baseline}) {  
  2.   Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  3.   Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  4.   Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  5. }
  6. .size({ width: '90%', height: 80 })
  7. .padding(10)
  8. .backgroundColor(0xAFEEEE)

在这里插入图片描述

☀️3.2.7 alignSelf

子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。如下例所示：

  1. Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子组件居中
  2.   Text('alignSelf Start').width('25%').height(80)
  3.     .alignSelf(ItemAlign.Start)
  4.     .backgroundColor(0xF5DEB3)
  5.   Text('alignSelf Baseline')
  6.     .alignSelf(ItemAlign.Baseline)
  7.     .width('25%')
  8.     .height(80)
  9.     .backgroundColor(0xD2B48C)
  10.   Text('alignSelf Baseline').width('25%').height(100)
  11.     .backgroundColor(0xF5DEB3)
  12.     .alignSelf(ItemAlign.Baseline)
  13.   Text('no alignSelf').width('25%').height(100)
  14.     .backgroundColor(0xD2B48C)
  15.   Text('no alignSelf').width('25%').height(100)
  16.     .backgroundColor(0xF5DEB3)
  17. }.width('90%').height(220).backgroundColor(0xAFEEEE)

在这里插入图片描述

二、案例

1.多行内容对齐

1.1 Start

  1. Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
  2.   Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
  3.   Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
  4.   Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
  5.   Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
  6.   Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
  7. }
  8. .width('90%')
  9. .height(100)
  10. .backgroundColor(0xAFEEEE)

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/269549

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。