【鸿蒙 HarmonyOS 4.0】弹性布局(Flex)

一、介绍

弹性布局(Flex)提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴,子元素默认沿主轴排列,子元素在主轴方向的尺寸称为主轴尺寸,在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多,比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。

二、布局方向

在弹性布局中,容器的子元素可以按照任意方向排列。通过设置参数direction,可以决定主轴的方向,从而控制子组件的排列方向。

2.1、布局方向-参数

主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向

参数:direction,参数类型:FlexDirection

例:Flex({ direction: FlexDirection.xxx}){...}

Row行, 主轴水平方向(默认值)
RowReverse行, 主轴水平方向,从右向左
Column列, 主轴垂直方向
ColumnReverse列, 主轴垂直方向,从下

2.2、布局方向-代码示例

@Entry
@Component
struct Index {build() {/** ⭐1.FlexDirection.Row(默认值):主轴为水平方向,子组件从起始端沿着水平方向开始排布。* ⭐2.FlexDirection.RowReverse:主轴为水平方向,子组件从终点端沿着FlexDirection. Row相反的方向开始排布。* ⭐3.FlexDirection.Column:主轴为垂直方向,子组件从起始端沿着垂直方向开始排布。* ⭐4.FlexDirection.ColumnReverse:主轴为垂直方向,子组件从终点端沿着FlexDirection. Column相反的方向开始排布。* */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)}
}

三、布局换行

弹性布局分为单行布局和多行布局。默认情况下,Flex容器中的子元素都排在一条线(又称“轴线”)上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时,Flex是单行布局还是多行布局。在多行布局时,通过交叉轴方向,确认新行堆叠方向。

3.1、布局换行-参数

主轴水平方向,默认不换行
换行显示

参数:wrap,参数类型:FlexWrap

例:Flex({ wrap: FlexWrap.xxx}){...}

NoWrap不换行(默认值)
Wrap换行,主轴方向从左往右
WrapReverse

换行,主轴反方向从右往左

3.2、布局换行-代码示例

@Entry
@Component
struct Index {build() {/** ⭐1.FlexWrap. NoWrap(默认值):不换行。如果子组件的宽度总和大于父元素的宽度,则子组件会被压缩宽度。* ⭐2.FlexWrap. Wrap:换行,每一行子组件按照主轴方向排列。* ⭐3.FlexWrap. WrapReverse:换行,每一行子组件按照主轴反方向排列。* */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)}
}

四、主轴对齐方式 

通过justifyContent参数设置在主轴方向的对齐方式。

4.1、主轴对齐方式-参数

主轴水平方向
主轴对齐方式

参数:justifyContent,参数类型:FlexAlign

例:Flex({ justifyContent: FlexAlign.xxx}){...}

Start左对齐(默认值)
Center居中
End右对齐
SpaceBetween两端对齐,项目之间的间隔都相等
SpaceAround每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍;
SpaceEvenly每个项目之间的间隔相等

4.2、主轴对齐方式-代码示例

@Entry
@Component
struct Index {build() {/** ⭐1.FlexAlign.Start(默认值):子组件在主轴方向起始端对齐, 第一个子组件与父元素边沿对齐,其他元素与前一个元素对齐。* ⭐2.FlexAlign.Center:子组件在主轴方向居中对齐。* ⭐3.FlexAlign.End:子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐,其他元素与后一个元素对齐。* ⭐4.FlexAlign.SpaceBetween:Flex主轴方向均匀分配弹性元素,相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。* ⭐5.FlexAlign.SpaceAround:Flex主轴方向均匀分配弹性元素,相邻子组件之间距离相同。*     第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。* ⭐6.FlexAlign.SpaceEvenly:Flex主轴方向元素等间距布局,*     相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。* */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)}
}

五、交叉轴对齐方式

 容器和子元素都可以设置交叉轴对齐方式,且子元素设置的对齐方式优先级较高。

可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式。

5.1、交叉轴对齐方式-参数

垂直方向
交叉轴对齐方式

参数:alignItems,参数类型:ItemAlign

例:Flex({ alignItems: ItemAlign.xxx}){...}

Auto交叉轴默认配置
Start交叉轴的起点对齐(顶部对齐)
Center交叉轴的中点对齐(垂直对齐)
End交叉轴的终点对齐(底部对齐);
Stretch交叉轴方向拉伸填充,在未设置尺寸时,拉伸到容器尺寸。
Baseline交叉轴方向文本基线对齐。

5.2、交叉轴对齐方式-代码示例

@Entry
@Component
struct Index {build() {/** ⭐1.ItemAlign.Auto:使用Flex容器中默认配置。* ⭐2.ItemAlign.Start:交叉轴方向首部对齐。* ⭐3.ItemAlign.Center:交叉轴方向居中对齐。* ⭐4.ItemAlign.End:交叉轴方向底部对齐。* ⭐5.ItemAlign.Stretch:交叉轴方向拉伸填充,在未设置尺寸时,拉伸到容器尺寸。* ⭐6.ItemAlign. Baseline:交叉轴方向文本基线对齐。* */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)}
}

5.3、子组件设置交叉轴对齐

子组件的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)

5.4、内容对齐

可以通过alignContent参数设置子组件各行在交叉轴剩余空间内的对齐方式,只在多行的flex布局中生效

5.4.1、交叉轴内容对齐-参数

仅在wrap为Wrap或WrapReverse下生效。
多根轴线的对齐方式

参数:alignContent,参数类型:FlexAlign

例:Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.xxx}){...}

Start与交叉轴的起点对齐(顶部对齐)
Center与交叉轴的中点对齐(居中对齐)
End与交叉轴的终点对齐(底部对齐)
SpaceBetween交叉轴两端对齐,各行间垂直间距平均分布
SpaceAround每根轴线两侧的间隔都相等。是元素首尾行与交叉轴两端距离的两倍
SpaceEvenly子组件各行间距,子组件首尾行与交叉轴两端距离都相等。

5.4.2、交叉轴内容对齐-代码示例

@Entry
@Component
struct Index {build() {/** ⭐1.FlexAlign.Start:子组件各行与交叉轴起点对齐。* ⭐2.FlexAlign.Center:子组件各行在交叉轴方向居中对齐。* ⭐3.FlexAlign.End:子组件各行与交叉轴终点对齐。* ⭐4.FlexAlign.SpaceBetween:子组件各行与交叉轴两端对齐,各行间垂直间距平均分布。* ⭐5.FlexAlign.SpaceAround:子组件各行间距相等,是元素首尾行与交叉轴两端距离的两倍。* ⭐6.FlexAlign.SpaceEvenly: 子组件各行间距,子组件首尾行与交叉轴两端距离都相等。* */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)}
}

六、自适应拉伸

在弹性布局父组件尺寸不够大的时候,通过子组件的下面几个属性设置其在父容器的占比,达到自适应布局能力。

6.1、flexBasis

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

6.2、flexGrow

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

说明:

父容器宽度420vp,三个子元素原始宽度为100vp,左右padding为20vp,总和320vp,剩余空间100vp根据flexGrow值的占比分配给子元素,未设置flexGrow的子元素不参与“瓜分”。

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

6.3、flexShrink

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

最后:👏👏😊😊😊👍👍 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/721817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高效学习编程语言的策略与实践

目录 写在开头1 确定学习目标1.1 明确学习动机1.2 设定短期和长期目标1.3 选择合适的编程语言1.4 结合实际情况调整目标 2 基础知识储备2.1 掌握核心语法2.2 理解编程范式和思维方式2.3 学习基本的数据结构和算法 3 制定学习计划3.1 确定学习时间和频率3.2 选择合适的学习资源3…

(Linux学习七)进程介绍

一、进程 进程生命周期:由系统程序。form出来的子程序,具备一定的父的资源(权利,内存空间,PID)直到运行完毕,退出系统 查看进程 ps aux 查看所有进程参数:aux ps a 显示现行…

详细分析Linux内存知识并释放内存

目录 前言1. 基本知识1.1 free1.2 cat /proc/meminfo1.3 slabtop 2. 清空内存 前言 本篇文章主要分析内存 如果是磁盘空间,推荐阅读:服务器出现根目录磁盘满了解决方法 1. 基本知识 在Linux系统中,查看内存的基本知识包括以下几个方面&…

蓄力绽放,2024上海帽子围巾手套展FAE倒计时20天

蓄力绽放,2024上海帽子围巾手套展FAE倒计时20天 刚刚过去的2023年,在面对复杂严峻的外部环境下,我国帽子围巾手套及服饰配饰行业经受住了前所未有的严峻考验。步入2024后,随着国内消费需求的逐步回暖和改善,及深入开发…

测试一下测试u一下3月5日

目录 前言 1. 环境准备 2. 在EB tresos上配置MCAL 步骤1:下载软件 步骤2:安装EB Tresos 23 步骤3:安装MCAL 3. 新建EB工程 4. 导出Arxml文件 前言 前面已经讲解了MCAL的作用。按照博主的理解,配置autosar工程肯定是从驱动…

Feign的性能优化

Feign的性能优化 Feign底层的客户端实现: URLConnection:默认实现,不支持连接池. Apache HttpClient:支持连接池 OKHttp:支持连接池 因此优化Feign的性能主要包括: 使用连接池代替默认的URLConnection 日志级别,…

让计算机保持记忆——变量和常量

程序中用于指定数值保存位置的方法,分为变量和常量。 在数学方程式中,类似x和y这类用于指代要求取得值的符号称为变量。顾名思义,这个值会发生变化。此外,将程序执行过程中会发生变化的各种数据保存在内存时也会使用变量。 如果需…

京东、淘宝天猫、1688无货源API(商品详情、店铺商品、商品列表)

item_get 获得淘宝商品详情 item_get_pro 获得淘宝商品详情高级版 item_review 获得淘宝商品评论 item_search 按关键字搜索淘宝商品 item_search_img 按图搜索淘宝商品(拍立淘) item_search_shop 获得店铺的所有商品 item_search_seller 搜索店铺列表 …

大气颗粒物与VOCs PMF源解析:环保行业的新利器

在现今日益严峻的环境问题中,大气颗粒物和臭氧污染尤为突出,它们不仅深刻影响着全球气候和生态环境,更对人体健康构成了严重威胁。为了有效应对这一挑战,我们首先需要深入了解颗粒物和臭氧的来源,特别是臭氧的前体物之…

[Flutter get_cli] 配置 sub_folder:false报错

flutter get_cli 配置 get_cli:sub_folder:false报错如下 Because getx_cli_learn01 depends on get_cli from unknown source "sub_folder", version solving failed. 原因是在 pubspec.yaml文件中, get_cli:sub_folder:false要和 dependencies: xxx dev_depe…

自动驾驶预测与决策规划(nuplan数据集)

欢迎大家关注我的B站: 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 目录 1.概述 2 数据采集 3.开环与闭环仿真 4.数据注释 5.场景 6.规划框架 6.1Train 6.2Simulation 6.3Metric 6.4Visualization 7.下载…

curlbuild.h:138:36: error: ‘socklen_t’ does not name a type

linux下调用libcurl.so时报错 解决&#xff1a;在引用curl.h之前添加socklen_t的引用&#xff0c;即#include <sys/socket.h>或 #include <unistd.h> 参考&#xff1a;https://blog.csdn.net/q454955979/article/details/72903463

nodejs 实现方法返回值常见方式

1、使用回调函数 回调函数是一种常见的方式来处理异步操作的结果。定义一个函数&#xff0c;并将回调函数作为参数传递给该函数。在异步操作完成后&#xff0c;调用回调函数并传递结果作为参数。 function asyncFunction(callback) {// 异步操作...// 完成后调用回调函数callb…

【排序】详解冒泡排序

一、思想 冒泡排序的基本思想是利用两两比较相邻记录的方式&#xff0c;通过一系列的比较和交换操作&#xff0c;使得较大或较小的元素逐渐移动到数列的一端。在每一轮的排序过程中&#xff0c;都会从数列的起始位置开始&#xff0c;对相邻的元素进行比较&#xff0c;如果它们…

开展“学雷锋我行动”文明实践主题活动向媒体投稿有哪些好方法?

开展“学雷锋我行动”文明实践主题活动并向媒体投稿时,以下是一些好的方法: 清晰的主题定位:确保投稿内容紧扣“学雷锋我行动”这一主题,展示如何在实际行动中践行雷锋精神,如志愿服务、社区建设、关爱他人等。 #图文万粉激励计划#高质量的内容制作:无论是文字、图片还是视频,…

python中的文件操作

文件操作步骤 在Python中&#xff0c;文件操作主要涉及打开、读取、写入和关闭文件。这是一门基础且重要的技能&#xff0c;因为它使得程序能够持久化数据&#xff0c;或者处理磁盘上的数据文件。Python提供了一个内建的open函数用于文件的打开&#xff0c;以及文件对象提供的…

【人工智能】Anthropic发布强大的Claude3对齐GPT-4,大模型杂谈个人感想

北京时间3月5日&#xff0c;人工智能创业公司Anthropic宣布&#xff0c;推出其突破性的Claude 3系列模型。Claude 3系列包含三个子模型&#xff0c;分别为Claude 3 Haiku、Claude 3 Sonnet和Claude 3 Opus&#xff0c;它们提供不同程度的智能、速度和成本选择&#xff0c;以满足…

【优化方案】Java 将字符串中的星号替换为0-9中的数字,并返回所有可能的替换结果

需求 将输入的字符串中的星号替换为0-9中的数字&#xff0c;并返回所有可能的替换结果&#xff0c;允许存在多个*号。 分析&#xff1a; 在每个星号位置&#xff0c;我们需要进行 0-9 的循环遍历&#xff0c;因此每个星号位置都有 10 种可能性。如果字符数组中有k个星号&#x…

轻松记录收支明细,智慧分析财务情况,一键打印保存!“

在这个信息爆炸的时代&#xff0c;财务管理已成为我们生活中不可或缺的一部分。无论您是家庭主妇、白领上班族还是企业经营者&#xff0c;都需要对自己的财务情况了如指掌。那么&#xff0c;如何轻松记录和分析收支明细&#xff0c;让财务管理变得简单高效呢&#xff1f;今天&a…

Mutex 争用解析

导读 上一篇文章介绍了latch争用的相关内容&#xff0c;本文继续介绍与latch相关的mutex争用的相关内容。 1、Mutex故障排除 查看相关视图v$sessionV$SESSION_WAIT P1,P2,P3值表示library cache 对象在争用状态下的哈希值&#xff0c;即持有mutex的会话。V$event_name和V$ses…