当前位置: 首页 > news >正文

【鸿蒙 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

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

最后:👏👏😊😊😊👍👍 

相关文章:

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

一、介绍 弹性布局(Flex)提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴,子元素默认沿主轴排列,子元素在主轴方向的尺寸称为主轴尺寸,在交叉轴方向的尺寸称为交叉轴尺寸…...

Java 客户端向服务端上传文件(TCP通信)

一、实验内容 编写一个客户端向服务端上传文件的程序,要求使用TCP通信的的知识,完成将本地机器输入的路径下的文件上传到D盘中名称为upload的文件夹中。并把客户端的IP地址加上count标识作为上传后文件的文件名,即IP(count&#…...

问题:前端获取long型数值精度丢失,后面几位都为0

文章目录 问题分析解决 问题 通过接口获取到的数据和 Postman 获取到的数据不一样,仔细看 data 的第17位之后 分析 该字段类型是long类型问题:前端接收到数据后,发现精度丢失,当返回的结果超过17位的时候,后面的全…...

Day26:安全开发-PHP应用模版引用Smarty渲染MVC模型数据联动RCE安全

目录 新闻列表 自写模版引用 Smarty模版引用 代码RCE安全测试 思维导图 PHP知识点: 功能:新闻列表,会员中心,资源下载,留言版,后台模块,模版引用,框架开发等 技术:输…...

LVS集群(Linux Virtual server)介绍----及LVS的NAT模式部署(一)

群集的含义 ●Cluster,集群、群集由多台主机构成,但对外只表现为一个整体,只提供访问入口(域名或IP地址),相当于一台大型计算机 问题: 互联网应用中,随着站点对硬件性能、响应速度、服务稳定性、数据可靠…...

海外媒体宣发套餐如何利用3种方式洞察市场-华媒舍

在当今数字化时代,媒体宣发成为了企业推广产品和品牌的重要手段之一。其中,7FT媒体宣发套餐是一种常用而有效的宣传方式。本文将介绍这种媒体宣发套餐,以及如何利用它来洞察市场。 一、关键概念 在深入讨论7FT媒体宣发套餐之前,让…...

开发知识点-Apache Struts2框架

Apache Struts2 介绍S2-001S2CVE-2023-22530 介绍 Apache Struts2是一个基于MVC(模型-视图-控制器)设计模式的Web应用程序框架,它是Apache旗下的一个开源项目,并且是Struts1的下一代产品。Struts2是在Struts1和WebWork的技术基础…...

【Spring高级】第3讲 Bean的生命周期

目录 基本的生命周期后处理器总结 基本的生命周期 为了演示生命周期的过程,我们直接使用 SpringApplication.run()方法,他会直接诶返回一个容器对象。 import org.springframework.boot.SpringApplication; import org.springframework.context.Config…...

【C语言】linux内核tcp_write_xmit和tcp_write_queue_purge

tcp_write_xmit 一、讲解 这个函数 tcp_write_xmit 是Linux内核TCP协议栈中的一部分,其基本作用是发送数据包到网络。这个函数会根据不同情况推进发送队列的头部,确保只要远程窗口有空间,就可以发送数据。 下面是对该函数的一些主要逻辑的中…...

opencv实现视频人脸识别

一. 实现指定图像的人脸识别 注意: 以下实例参考《OpenCV轻松入门面向Python》李立宗著,使用python语言,编辑器为PyCharm,且都运行成功。 1.dface3.jpg图片文件和当前代码放在同一级目录下。 2.级联分类器文件和当前代码文件放在…...

【今日面经】24/3/9 广州Java某小厂电话面经

面经来源:https://www.nowcoder.com/?type818_1 目录 1、 和equals()有什么区别?2、String变量直接赋值和构造函数赋值比较相等吗?3、String一些方法?4、抽象类和接口有什么区别?5、Java容器有哪些?6、Lis…...

日期问题---算法精讲

前言 今天讲讲日期问题,所谓日期问题,在蓝桥杯中出现众多,但是解法比较固定。 一般有判断日期合法性,判断是否闰年,判断日期的特殊形式(回文或abababab型等) 目录 例题 题2 题三 总结 …...

倒计时35天

dp预备(来源:b站acm刘春英老师) 1. 2. 3. 4. 5. 6. 7....

JAVA后端开发面试基础知识(七)——多线程

1. 线程池原理 优点 降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。提高响应速度。当任务到达时,任务可以不需要等到线程创建就能立即执行。提高线程的可管理性。线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,使用线…...

Apache的安装与目录结构详细解说

1. Apache安装步骤 Apache是一款开源的Web服务器软件,常用于搭建网站和服务。以下是Apache的安装步骤: 在官方网站(https://httpd.apache.org/)下载最新版本的Apache软件包。解压下载的软件包到指定目录。运行安装程序&#xff…...

axios的详细使用

目录 axios:现代前端开发的HTTP客户端王者 一、axios简介 二、axios的基本用法 1. 安装axios 2. 发起GET请求 3. 发起POST请求 三、axios的高级特性 1. 拦截器 2. 取消请求 3. 自动转换JSON数据 四、axios在前端开发中的应用 五、总结 axios&#xff1a…...

空间复杂度的OJ练习——轮转数组

旋转数组OJ链接:https://leetcode-cn.com/problems/rotate-array/ 题目: 思路: 通过题目我们可以知道这是一个无序数组,只需要将数组中的数按给定条件重新排列,因此我们可以想到以下几种方法: 1.暴力求解法…...

学习与学习理论 - 2024教招 - test

一 方向 所有学习理论大的观点,到某个人物个人的观点。抖音:按照粉丝数量、收藏数量、点赞数量排名从编程(思想)、java、自己所拥有的特点看学习方法顺序:java、自身、教学理论的总观点、教学理论代表人物的观点、散兵…...

Spring web开发(入门)

1、我们在执行程序时,运行的需要是这个界面 2、简单的web接口(127.0.0.1表示本机IP) package com.example.demo;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestCont…...

这是谁的女儿?其母亲早已红过头了,现在小小年纪的她也爆红网络,没想到吧?

这是谁的女儿?其母亲早已红过头了,现在小小年纪的她也爆红网络,没想到吧? 原来,作母亲的她在红极一时后似乎沉寂了下来,没想到她11岁的女儿近年来也在社交媒体上走红,她为何也成了小网红呢&…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...