【鸿蒙 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.mfbz.cn/a/432181.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

六、软考-系统架构设计师笔记-软件工程基础知识

六、软考-系统架构设计师笔记-软件工程基础知识

1、软件工程 软件工程是将系统化的、严格约束的、可量化的方法应用于软件的开发、运行和维护，即将工程化应用于软件并对上述方法的研究。 软件要经历从需求分析、软件设计、软件开发、运行维护，直至被淘汰这样的全过程，这个过程称为软件的生…
阅读更多...
什么是聚簇索引与非聚集索引和区别?

什么是聚簇索引与非聚集索引和区别?

什么是聚簇索引与非聚集索引和区别? 按物理存储分类:InnoDB的存储方式是聚集索引，MVISAM的存储方式是非聚集索引 test innodb.frm 测试 innodb.ibd Frame表结构 数据表索引数据 test myisam.frm ---->Frame表结构test myisam.MYD_---数据表数据test_myisam.MYl-…
阅读更多...
HTML实体字符列表，必看

HTML实体字符列表，必看

HTML、CSS、JS三大部分都起什么作用？ HTML内容层，它的作用是表示一个HTML标签在页面里是个什么角色；CSS样式层，它的作用是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示；JS行为层…
阅读更多...
【论文笔记】Language Models are Unsupervised Multitask Learners

【论文笔记】Language Models are Unsupervised Multitask Learners

Language Models are Unsupervised Multitask Learners 回顾一下第一代 GPT-1 ： 设计思路是 “海量无标记文本进行无监督预训练少量有标签文本有监督微调” 范式；模型架构是基于 Transformer 的叠加解码器（掩码自注意力机制、残差、Layernorm…
阅读更多...
【Unity】ABB CRB 15000 外部引导运动

【Unity】ABB CRB 15000 外部引导运动

一、RobotStudio控制器的文件系统和配置参数 HOME：控制器文件系统的根目录或起始点。配置：机器人控制器的配置设置和参数。外件信息：连接到机器人的外部组件的信息。I/O 系统：输入/输出系统，管理机器人和外部设备之间的…
阅读更多...
.[[backup@waifu.club]].wis最近多发，数据库被加密了能恢复吗？

.[[backup@waifu.club]].wis最近多发，数据库被加密了能恢复吗？

Wis勒索病毒是怎样加密文件的？ WIS勒索病毒加密文件的过程主要依赖于强大的加密算法，通常是RSA或AES等对称或非对称加密算法。这些算法可以非常快速地将用户的文件加密，使得文件在没有正确密钥的情况下无法被正常读取或打开。技术服务号&…
阅读更多...
C#与欧姆龙PLC实现CIP通讯

C#与欧姆龙PLC实现CIP通讯

参考文档： 欧姆龙PLC使用-CSDN博客 CIP通讯介绍（欧姆龙PLC）-CSDN博客 使用NuGet添加引用：CIPCompolet 基础参考我的CIP协议介绍，默认TCP端口为：44818 类NXCompolet 类的功能可以在安装PLC开发软件后帮…
阅读更多...
Mol2文件处理-拆分、合并、提取名称、计数与格式转换

Mol2文件处理-拆分、合并、提取名称、计数与格式转换

欢迎浏览我的CSND博客！ Blockbuater_drug …点击进入 文章目录 前言一、Mol2文件合并二、Mol2文件拆分为含有单个分子的文件三、Mol2文件分子名称修改与提取3.1 分子名称修改去除空格3.2 文件名称提取 四、Mol2文件包含分子计数4.1 Mol2文件中分子计数4.2 分子计数传…
阅读更多...
Pytorch学习 day03（Tensorboard、Transforms）

Pytorch学习 day03（Tensorboard、Transforms）

Tensorboard Tensorboard能够可视化loss的变化过程，便于我们查看模型的训练状态，也能查看模型当前的输入和输出结果 在Pycharm中，可以通过按住ctrl，并左键点击某个库来进入源文件查看该库的使用方法SummaryWriter是用来向log_dir…
阅读更多...
工具函数模板题（蓝桥杯 C++ 代码 注解）

工具函数模板题（蓝桥杯 C++ 代码 注解）

目录 一、Vector容器： 二、Queue队列 三、Map映射 四、题目（快递分拣 vector）： 代码： 五、题目（CLZ银行问题 queue）： 代码： 六、题目（费里的语言 map&…
阅读更多...
通过 JS 获取和修改表单元素属性和样式属性

通过 JS 获取和修改表单元素属性和样式属性

JS 获取和修改表单元素属性 表单(主要是指 input 标签)的以下属性都可以通过 DOM API来修改 value: input 的值checked: 复选框会使用selected: 下拉框会使用disabled: 禁用type: input 的类型(文本, 密码, 按钮, 文件等) 修改 input 的值 > value 示例1: 点击切换状态的…
阅读更多...
【CSP试题回顾】202212-2-训练计划

【CSP试题回顾】202212-2-训练计划

CSP-202212-2-训练计划 解题思路 输入和初始化： 首先，代码从输入中获取项目的截止日期和项目数量。然后，它初始化一个项目列表，每个项目都有其依赖项、被依赖的项目集合、完成时间、总完成时间（包括依赖链&#xff09…
阅读更多...
深度学习模型部署(番外3)神经网络不同层的量化方法

深度学习模型部署(番外3)神经网络不同层的量化方法

神经网络层量化 批归一化层Batch Normalization(BN层) 关于归一化的原理可以看之前的这篇blog：BatchNorm原理与应用 批归一化在推理过程中会被融合到上一层或者下一层中，这种处理方式被称为批归一化折叠。这样可以减少量化，也可以减少属于的…
阅读更多...
EPSON RA8000CE (RTC模块)压电侠

EPSON RA8000CE (RTC模块)压电侠

RA8000CE是一个集成了32.768 kHz数字温度补偿晶体振荡器(DTCXO)的RTC模块。它包括各种功能，如具有闰年校正的秒到年时钟/日历，时间警报，唤醒计时器，时间更新中断，时钟输出和时间戳功能，可以在外部或内部事件…
阅读更多...
python 蓝桥杯填空题

python 蓝桥杯填空题

文章目录 字母数判断列名（进制问题）特殊日期 字母数 由于是填空题，那么寻找的话，就直接让每一个位置都是A,通过计算看看是不是结果大于2022即可 判断列名（进制问题） 这道题目，我们可以往数字进制…
阅读更多...
基于“xxx” Androidx平台的驱动及系统开发 之 触摸板篇

基于“xxx” Androidx平台的驱动及系统开发 之 触摸板篇

目录 一、基于全志 A133 Android10平台，适配1366x768 - ilitek2511触摸1、原理图分析2、驱动移植与适配3、补丁和资源文件 二、基于瑞芯微 RK3566 Android11平台，适配GT9XX触摸1、原理图分析2、补丁及资源文件 三、遇到的问题与解决1、基于amlogic Andro…
阅读更多...
Pytorch学习07_torchvision中数据集的使用

Pytorch学习07_torchvision中数据集的使用

torchvision torchvision 是 PyTorch 生态系统中的一个用于计算机视觉任务的包，它提供了一系列用于图像和视频处理的工具和数据集。torchvision 可以帮助你加载、预处理、增强和可视化图像数据，并提供了一些经典的计算机视觉模型和预训练权重&#xff0…
阅读更多...
计算机网络——24路由器组成

计算机网络——24路由器组成

路由器组成 路由器的结构概况 高层面(非常简化的)通用路由器体系架构 路由：运行路由选择算法／协议 (RIP, OSPF, BGP) - 生成 路由表转发：从输入到输出链路交换数据报 - 根据路由表进行分组的转发 输入端口功能 分布式交换： 根…
阅读更多...
SkyWalking链路追踪上下文TraceContext的traceId生成的实现原理剖析

SkyWalking链路追踪上下文TraceContext的traceId生成的实现原理剖析

结论先行 【结论】 SkyWalking通过字节码增强技术实现，结合依赖注入和控制反转思想，以SkyWalking方式将追踪身份traceId编织到链路追踪上下文TraceContext中。 是不是很有趣，很有意思！！！ 【收获】 skywal…
阅读更多...
什么是jwt

什么是jwt

jwt是JSON Web Token，由3部分构成： 头部Header：头部包含了两部分，token 类型和采用的加密算法（可为none，后端应限制加密算法，不以这里为准）。 载荷Payload：这部分才是重要…
阅读更多...
最新文章

Copyright @ 2022~2023