【鸿蒙 HarmonyOS 4.0】弹性布局（Flex）

news2024/12/26 11:59:50

一、介绍

弹性布局（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.coloradmin.cn/o/1490858.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Pipy 进化：从可编程代理到应用引擎

Pipy 进化：从可编程代理到应用引擎

网络功能变得越来越复杂，编写和维护的难度提升；新的基于 Pipy 的应用中，Pipy 角色从数据平面变成控制面，需要执行更多复杂非网络的逻辑；从长远来看，Pipy 将更像是一个常见的类似 shell/bash 的系统脚本工具…
阅读更多...
如何在MinIO系统中进行配置并结合内网穿透实现公网远程连接上传文件

如何在MinIO系统中进行配置并结合内网穿透实现公网远程连接上传文件

文章目录 前言1. 创建Buckets和Access Keys2. Linux 安装Cpolar3. 创建连接MinIO服务公网地址4. 远程调用MinIO服务小结5. 固定连接TCP公网地址6. 固定地址连接测试 前言 MinIO是一款高性能、分布式的对象存储系统，它可以100%的运行在标准硬件上，即X86等…
阅读更多...
力扣hot100题解（python版33-35题）

力扣hot100题解（python版33-35题）

33、排序链表 给你链表的头结点 head ，请将其按 升序 排列并返回 排序后的链表 。 示例 1： 输入：head [4,2,1,3] 输出：[1,2,3,4]示例 2： 输入：head [-1,5,3,4,0] 输出：[-1,0,3,4,5]示例 3&a…
阅读更多...
你知道该如何使用 JS 创建 css 类样式吗？

你知道该如何使用 JS 创建 css 类样式吗？

前言 去年我为公司内部开发了一个浏览器插件，当时为了加快开发进度，我没有选用现成的插件框架，而是直接使用原生 JavaScript 搭配 Rollup 进行打包。由于这是一个浏览器插件，我不可避免地需要对页面元素进行操作，比如…
阅读更多...
小太阳防倾倒开关原理

小太阳防倾倒开关原理

小太阳防倾倒开关是一种体积小巧、安装简便、灵敏度高的设备，其原理基于角度感应和光电技术。该开关具有精确的角度判断能力，无需机械接触，稳定性强，支持个性化角度设置，可根据需求进行水平、垂直或倒置安装。 在应用…
阅读更多...
注意力机制（代码实现案例)

注意力机制（代码实现案例)

学习目标 了解什么是注意力计算规则以及常见的计算规则.了解什么是注意力机制及其作用.掌握注意力机制的实现步骤. 1 注意力机制介绍 1.1 注意力概念 我们观察事物时，之所以能够快速判断一种事物(当然允许判断是错误的), 是因为我们大脑能够很快把注意力放在事物…
阅读更多...
STM32（16）使用串口向电脑发送数据

STM32（16）使用串口向电脑发送数据

发送字节 发送数组 发送字符和字符串 字符： 字符串： 字符串在电脑中以字符数组的形式存储
阅读更多...
最新AI系统ChatGPT网站H5系统源码，支持Midjourney绘画

最新AI系统ChatGPT网站H5系统源码，支持Midjourney绘画

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统，支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美，那么如何搭建部署AI创作ChatGPT？小编这里写一个详细图文教程吧。已支持GPT…
阅读更多...
《互联网的世界》第四讲-拥塞控制与编码

《互联网的世界》第四讲-拥塞控制与编码

需要澄清的一个误区是，拥塞绝不是发送的数据量太大导致，而是数据在极短的时间段内到达了同一个地方以至于超过了网络处理容量导致，拥塞的成因一定要考虑时间因素。换句话说，拥塞由大突发导致。 只要 pacing，再多的数据…
阅读更多...
MongoDB开启事务

MongoDB开启事务

MongoDB开启事务 配置单节点。到路径C:\Program Files\MongoDB\Server\4.0\bin 使用记事本以管理员权限打开文件mongod.cfg添加如下配置： replication:replSetName: rs02. 重启MongoDB服务 3. 重启后执行命令 rs.initiate()
阅读更多...
Python采集学习笔记-request的get请求和post请求

Python采集学习笔记-request的get请求和post请求

使用http://httpbin.org测试,一个简单的 HTTP 请求和响应服务。(需联网)1.导入requests包 import requests 2.测试get请求 url http://httpbin.org/get par {key1: value1, key2: value2} # 不带参数请求 r1 requests.get(url) # 带参数请求 r2 requests.get(url, paramspa…
阅读更多...
数据库管理-第158期 Oracle Vector DB AI-09（20240304）

数据库管理-第158期 Oracle Vector DB AI-09（20240304）

数据库管理158期 2024-03-04 数据库管理-第158期 Oracle Vector DB & AI-09（20240304）1 创建示例表2 添加过滤条件的向量近似查询示例1示例2示例3示例4示例5示例6示例7 总结 数据库管理-第158期 Oracle Vector DB & AI-09（20240304&a…
阅读更多...
怎么采集GBK或GB2312等特殊字符编码的网站数据

怎么采集GBK或GB2312等特殊字符编码的网站数据

如果要采集的网站是GBK或GB2312等特殊字符编码，采集结果可能是一堆看不懂的文字或乱码，无法使用。 通常网页文章采集工具有字符编码选项，默认是UTF-8（现在大部分网站都是），改选为GBK或GB2312字符编码即可&…
阅读更多...
无人机/飞控--ArduPilot、PX4学习历程记录(1)

无人机/飞控--ArduPilot、PX4学习历程记录(1)

本篇博客用来记录个人学习记录，存放各种文章链接、视频链接、学习历程、实验过程和结果等等.... 最近在整无人机项目，接触一下从来没有接触过的飞控...(听着就头晕)，本人纯小白。 目录 PX4、Pixhawk、APM、ArduPilot、Dronecode Dronekit…
阅读更多...
【ArcPy】游标访问几何数据

【ArcPy】游标访问几何数据

访问质心坐标相关数据 结果展示 代码 import arcpy shppath r"C:\Users\admin\Desktop\excelfile\a2.shp" with arcpy.da.SearchCursor(shppath, ["SHAPE","SHAPEXY","SHAPETRUECENTROID","SHAPEX","SHAPEY",&q…
阅读更多...
【Mybatis】批量映射优化 分页插件PageHelper 逆向工程插件MybatisX

【Mybatis】批量映射优化 分页插件PageHelper 逆向工程插件MybatisX

文章目录 一、Mapper批量映射优化二、插件和分页插件PageHelper2.1 插件机制和PageHelper插件介绍2.2 PageHelper插件使用 三、逆向工程和MybatisX插件3.1 ORM思维介绍3.2 逆向工程3.3 逆向工程插件MyBatisX使用 总结 一、Mapper批量映射优化 需求: Mapper 配置文件很多时&…
阅读更多...
高精准无人机激光雷达标定板

高精准无人机激光雷达标定板

无人机激光雷达标定板是一种用于校准无人机激光雷达系统的工具，它可以帮助无人机获取更准确、更可靠的数据，从而提高无人机的导航精度和自主控制能力。本文将从无人机激光雷达标定板的基本概念、作用、应用领域、市场现状和发展趋势等方面进行介绍。 一…
阅读更多...
LeetCode 1976.到达目的地的方案数：单源最短路的Dijkstra算法

LeetCode 1976.到达目的地的方案数：单源最短路的Dijkstra算法

【LetMeFly】1976.到达目的地的方案数：单源最短路的Dijkstra算法 力扣题目链接：https://leetcode.cn/problems/number-of-ways-to-arrive-at-destination/ 你在一个城市里，城市由 n 个路口组成，路口编号为 0 到 n - 1 &#xff…
阅读更多...
【音视频开发好书推荐1】《RTC程序设计：实时音视频权威指南》

【音视频开发好书推荐1】《RTC程序设计：实时音视频权威指南》

1、WebRTC概述 WebRTC（Web Real-Time Communication）是一个由Google发起的实时音视频通讯C开源库，其提供了音视频采集、编码、网络传输，解码显示等一整套音视频解决方案，我们可以通过该开源库快速地构建出一个音视频通…
阅读更多...
12-Linux部署Zookeeper集群

12-Linux部署Zookeeper集群

Linux部署Zookeeper集群 简介 ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务，是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023