鸿蒙ArkUI开发：常用布局【主轴】

本文主要是介绍鸿蒙ArkUI开发：常用布局【主轴】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ArkUI中常用布局容器

线性布局（Row/Column）

1. 线性布局的子元素在线性方向上（水平方向和垂直方向）依次排列
2. 线性布局容器包括[Row]和[Column]。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列
3. 开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

主轴

1. 线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。
2. Row容器主轴为横向，Column容器主轴为纵向。通过justifyContent属性设置子元素在容器主轴上的排列方式
3. 默认相邻子元素是紧贴着的，也可以通过space设置子元素间的间距

Column容器内子元素在主轴上的排列

主轴方向：垂直向下

typescript
复制代码
Column() {
...
}.justifyContent(FlexAlign.Start)

1. justifyContent(FlexAlign.Start)：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐
2. justifyContent(FlexAlign.Center)：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同
3. justifyContent(FlexAlign.End)：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐
4. justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐
5. justifyContent(FlexAlign.SpaceAround)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
6. justifyContent(FlexAlign.SpaceEvenly)：主轴方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

Row容器内子元素在主轴上的排列

主轴方向：水平向右

typescript
复制代码
Row() {
...
}.justifyContent(FlexAlign.Start)`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

1. justifyContent(FlexAlign.Start)：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐
2. justifyContent(FlexAlign.Center)：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同
3. justifyContent(FlexAlign.End)：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐
4. justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐
5. justifyContent(FlexAlign.SpaceAround)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
6. justifyContent(FlexAlign.SpaceEvenly)：主轴方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

这篇关于鸿蒙ArkUI开发：常用布局【主轴】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---