【鸿蒙开发实战篇】详细介绍ArkUI中线性布局，层叠布局和弹性布局

本文链接：https://blog.youkuaiyun.com/HarmonyOS_001/article/details/140127808

前言

我们知道学习任何一个语言，都是要先从基础语法开始，而对于一个前端语言来讲，基础语法肯定是要从学习它的布局用法开始，在ArkUI里面，也有它自己的布局组件，本篇内容里面将会先了解一下ArkUI里面线性布局，层叠布局和弹性布局的用法

线性布局(Row/Column)

学过Flutter或者Compose的基本都不会对这俩个布局感到陌生，基本在哪里概念都是相同的，Row代表着布局子元素可以在水平方向上排列布局，它的主轴就是水平方向，交叉轴就是垂直方向，Column代表着布局子元素在垂直方向上排列，它的主轴就是垂直方向，交叉轴就是水平方向，下面就是一些常见属性在ArkTS里面的是如何设置的

间距

所谓距离产生美，在任何一个线性布局里面的元素之间，相信多多少少都会存在一些间距，那么在ArkTS里面我们使用space属性来设置间距，来看下面这段代码
在这里插入图片描述

这里有个Column组件，在组件里面添加了三个Row组件并且使用不同的颜色区分开来，现在Row之间是没有设置任何间距的，页面展示的样子是这样的
在这里插入图片描述

而通过添加space属性就可以让Column的子元素在主轴方向上设置间距
在这里插入图片描述

看到这里添加完space属性之后，Column里面的元素之间就有间距了，当然我们也可以给子元素设置margin，这样也可以达到同样的效果，但是space是最直观的，Row的间距是同样的设置方式，这里就省略了，感兴趣的可以自行尝试

对齐方式

除了间距，对齐方式也是比较常用的，对齐方式主要分为在主轴上的对齐方式和在交叉轴上的对齐方式，在主轴上我们使用justifyContent函数来设置，入参是一个枚举类FlexAlign，有以下几个值
在这里插入图片描述

下面是每个枚举值所对应的样式

FlexAlign.Start

在这里插入图片描述

FlexAlign.Center

在这里插入图片描述

FlexAlign.End

在这里插入图片描述

FlexAlign.SpaceBetween

在这里插入图片描述

FlexAlign.SpaceEvenly

在这里插入图片描述

FlexAlign.SpaceAround

在这里插入图片描述

与主轴上对齐相对应的，还有交叉轴上的对齐方式，在交叉轴上使用alignItems函数去对齐元素，接收的参数是，如果交叉轴是水平方向的，那么使用枚举类HorizontalAlign作为参数，所支持的枚举属性是Start,Center,End,如果交叉轴方向是垂直方向的，那么使用枚举类VerticalAlign作为参数，所支持的枚举属性是Top,Center,Bottom,下面以Row组件为例看一下交叉轴方向上如何对齐

VerticalAlign.Top

在这里插入图片描述

VerticalAlign.Center

在这里插入图片描述

VerticalAlign.Bottom

在这里插入图片描述

如果元素中某一个元素有自己的想法，不想用父组件定义的对齐方式，那么可以单独在子元素上设置alignSelf，传参是一个ItemAlign，有以下几个值
在这里插入图片描述

其中Baseline,Auto,Stretch适用于Flex布局，在Column与Row布局中只使用其他三个值Start,Center,End,理解起来也很容易，分别都是在交叉轴方向上的开始位置，中间位置和结束位置，比如在上面的例子中，我们在给所有子元素设置了交叉轴方向底部对齐的基础上，给中间的元素设置顶部对齐，代码与效果图如下所示
在这里插入图片描述