【鸿蒙 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,一经查实,立即删除!

相关文章

(Linux学习七)进程介绍

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

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

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

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

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

大气颗粒物与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.下载…

【排序】详解冒泡排序

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

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

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

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

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

蓝凌EIS智慧协同平台 rpt_listreport_definefield.aspx SQL注入漏洞复现

0x01 产品简介 蓝凌EIS智慧协同平台是一款专为企业提供高效协同办公和团队合作的产品。该平台集成了各种协同工具和功能,旨在提升企业内部沟通、协作和信息共享的效率。 0x02 漏洞概述 由于蓝凌EIS智慧协同平台 rpt_listreport_definefield.aspx接口处未对用户输入的SQL语句…

Linux 文件系列:深入理解文件描述符fd,重定向,自定义shell当中重定向的模拟实现

Linux 文件系列:深入理解文件fd,重定向,自定义shell当中重定向的模拟实现 一.预备知识二.回顾C语言中常见的文件接口跟重定向建立联系1.fopen函数的介绍2.fclose函数的介绍3.代码演示1.以"w"(写)的方式打开2.跟输出重定向的联系3.以 "a"(追加)的方式打开4.…

枚举与尺取法(蓝桥杯 c++ 模板 题目 代码 注解)

目录 组合型枚举(排列组合模板()): 排列型枚举(全排列)模板: 题目一(公平抽签 排列组合): ​编辑 代码: 题目二(座次问题 全排…

Java8的Stream执行机制

Java8的Stream执行机制 Stream的概念解说Stream的概念解说-Stream的含义Stream的概念解说-现实类比Stream的概念解说-Stream中的概念Stream的执行机制Stream的执行机制-最直接的流水线实现方式Stream的执行机制-for循环也能干的事Stream的执行机制-基本类图Stream的执行机制-记…

AI大模型的预训练、迁移和中间件编程

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…

RS编码的FPGA实现

RS编码,即Reed-solomon codes,是一类纠错能力很强的特殊的非二进制BCH码(BCH码是一种有限域中的线性分组码,具有纠正多个随机错误的能力)。对于任选正整数S可构造一个相应的码长为nqS-1的 q进制BCH码,而q作…

2024-03-05 linux 分区老显示满,Use 100%,原因是SquashFS 是一种只读文件系统,它在创建时就已经被填满,所有空间都被使用。

一、这两天一直纠结一个问题,无论怎么修改,linux 分区老显示满,Use 100%,全部沾满。如下图的oem分区。 二、导致出现上面的原因是:SquashFS文件系统里的空间利用率总是显示为100%。 三、SDK里面也说明SquashFS文件系统…

$nextTick底层原理(详细) - vue篇

公众号:需要以下pdf,关注下方 2023已经过完了,让我们来把今年的面试题统计号,来备战明年的金三银四!所以,不管你是社招还是校招,下面这份前端面试工程师高频面试题,请收好。 前言 n…

【力扣白嫖日记】1045.买下所有产品的客户

前言 练习sql语句,所有题目来自于力扣(https://leetcode.cn/problemset/database/)的免费数据库练习题。 今日题目: 1045.买下所有产品的客户 表:Customer 列名类型customer_idintproduct_keyint 该表可能包含重复…

数据结构 - Trie树(字符串统计、最大异或对)

文章目录 前言Part 1:Trie字符串统计1.题目描述输入格式输出格式数据范围输入样例输出样例 2.算法 Part 2:最大异或对1.题目描述输入格式输出格式数据范围输入样例输出样例 2.算法 前言 本篇博客将介绍Trie树的常见应用,包括:Trie…

OPC DA协议网关

在工业自动化领域,数据的采集与传输是至关重要的环节。而OPC DA(OLE for Process Control Data Access)协议作为这一领域内的标准通信协议,为不同设备和软件之间的数据交换提供了统一的接口。今天,我们就来深入了解一下…