#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区-51CTO.COM
51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex） 原创

愚公搬代码
发布于 2023-12-24 21:47
浏览
1收藏

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

@TOC

🚀一、Flex

🔎1.概述

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

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

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

🔎2.布局方向

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.1 FlexDirection.Row

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.2 FlexDirection.RowReverse

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.3 FlexDirection.Column

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.4 FlexDirection.ColumnReverse

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🔎2.布局换行

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

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

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

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

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

🦋2.1 FlexWrap.NoWrap

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.2 FlexWrap.Wrap

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.3 FlexWrap. WrapReverse

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🔎3.对齐方式

🦋3.1 主轴对齐方式

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区
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

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.1.2 FlexAlign.Center

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.1.3 FlexAlign.End

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.1.4 FlexAlign.SpaceBetween

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.1.5 FlexAlign.SpaceAround

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.1.6 FlexAlign.SpaceEvenly

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋3.2 交叉轴对齐方式

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

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

☀️3.2.1 ItemAlign.Auto

使用Flex容器中默认配置。

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.2.2 ItemAlign.Start

交叉轴方向首部对齐

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.2.3 ItemAlign.Center

交叉轴方向居中对齐

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.2.4 ItemAlign.End

交叉轴方向底部对齐

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.2.5 ItemAlign.Stretch

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

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.2.6 ItemAlign.Baseline

交叉轴方向文本基线对齐

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

☀️3.2.7 alignSelf

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

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子组件居中
  Text('alignSelf Start').width('25%').height(80)
    .alignSelf(ItemAlign.Start)
    .backgroundColor(0xF5DEB3)
  Text('alignSelf Baseline')
    .alignSelf(ItemAlign.Baseline)
    .width('25%')
    .height(80)
    .backgroundColor(0xD2B48C)
  Text('alignSelf Baseline').width('25%').height(100)
    .backgroundColor(0xF5DEB3)
    .alignSelf(ItemAlign.Baseline)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xD2B48C)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xF5DEB3)
}.width('90%').height(220).backgroundColor(0xAFEEEE)

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🚀二、案例

🔎1.多行内容对齐

🦋1.1 Start

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋1.2 Center

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋1.3 End

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋1.4 SpaceBetween

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋1.5 SpaceAround

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋1.6 SpaceEvenly

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

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🔎2.自适应拉伸

🦋2.1 flexBasis

设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，那子项的空间为width/height的值。

Flex() {
  Text('flexBasis("auto")')
    .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽松
    .height(100)
    .backgroundColor(0xF5DEB3)
  Text('flexBasis("auto")' + ' width("40%")')
    .width('40%')
    .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值
    .height(100)
    .backgroundColor(0xD2B48C)

  Text('flexBasis(100)') // 未设置width以及flexBasis值为100，宽度为100vp
    .fontSize(15)
    .flexBasis(100)
    .height(100)
    .backgroundColor(0xF5DEB3)

  Text('flexBasis(100)')
    .fontSize(15)
    .flexBasis(100)
    .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp
    .height(100)
    .backgroundColor(0xD2B48C)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.2 flexGrow

设置父容器的剩余空间分配给此属性所在组件的比例。用于“瓜分”父组件的剩余空间。

Flex() {
Text('flexGrow(2)')
  .flexGrow(2) 
  .width(100)
  .height(100)
  .backgroundColor(0xF5DEB3)

Text('flexGrow(3)')
  .flexGrow(3)
  .width(100)
  .height(100)
  .backgroundColor(0xD2B48C)

Text('no flexGrow')
  .width(100) 
  .height(100)
  .backgroundColor(0xF5DEB3)
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区
父容器宽度400vp，三个子组件原始宽度为100vp，总和300vp，剩余空间100vp根据flexGrow值的占比分配给子组件，未设置flexGrow的子组件不参与“瓜分”。

第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp2/5=140vp，第二个元素为100vp+100vp3/5=160vp。

🦋2.3 flexShrink

当父容器空间不足时，子组件的压缩比例。

Flex({ direction: FlexDirection.Row }) {
  Text('flexShrink(3)')
    .fontSize(15)
    .flexShrink(3)
    .width(200)
    .height(100)
    .backgroundColor(0xF5DEB3)

  Text('no flexShrink')
    .width(200)
    .height(100)
    .backgroundColor(0xD2B48C)

  Text('flexShrink(2)')
    .flexShrink(2)
    .width(200)
    .height(100)
    .backgroundColor(0xF5DEB3)
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

🦋2.4 案例

@Entry  
@Component
struct FlexExample {
  build() {
    Column() {
      Column({ space: 5 }) {
        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
          Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
        }
        .height(70)
        .width('90%')
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%') 
 }
}

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）-鸿蒙开发者社区

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
HarmonyOS
标签
HarmonyOS
已于2023-12-24 21:47:46修改
赞
收藏 1
回复
举报
回复
    相关推荐
    愚公搬代码
    这个用户很懒，还没有个人简介
    帖子
    视频
    声望
    粉丝
    最近发布
    热门推荐
    #打开鸿蒙知识宝盒# 智问智答大师赛 72回复
    HarmonyOS基础：如何使tabbar/navbar背景色不能衍生到状态栏和导航栏？ 3回复
    鸿蒙开发Hvigor插件动态生成代码 4回复
    HarmonyOS：构建双模式计时器应用的实践 3回复
    #鸿蒙通关秘籍# 问答挑战赛（第三期）来啦！ 1回复
    相关问题
    HarmonyOS应用开发系列官方课程有高级课程吗？ 3回答
    如何获取当前的年、月、日？ 1回答
    HarmonyOS ArkUI中Column、Row、Flex组件中使用Blank不支持子组件 1回答
    HarmonyOS 时间戳如何转换为xxxx年xx月xx日的字符串 1回答
    HarmonyOS ArkUI是否有类似CSS中的Flex布局？ 1回答
    社区精华内容

    目录