鸿蒙应用开发从入门到实战（十四）：ArkUI组件Column&Row&线性布局

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解Column和Row组件的使用以及线性布局的方法。
一、Column&Row组件及线性布局

1.1 线性布局概述

​        线性布局（LinearLayout）是开发中最常用的布局，可通过容器组件Column和Row构建，其子组件会在垂直或者水平方向上进行线性排列，具体效果如下图所示

列排列

行排列说明:
Column和Row容器均有两个轴线，分别是主轴和交叉轴

• 主轴：线性布局容器在布局方向上的轴线，Row容器主轴为横向，Column容器主轴为纵向。
  
• 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。
  

1.2 Column&Row参数

Column和Row容器的参数类型为{space?: string | number}，开发者可通过space属性调整子元素在主轴方向上的间距，效果如下

列间隔

行间隔示例代码：
pages目录下新建layout/linear目录，新建SpacePage.ets文件

1. @Entry
2. @Component
3. // 线性布局
4. struct SpacePage {
6.   build() {
7.     // 通过space属性调整子元素在主轴方向上的间距
8.     Column({ space: 150 }) {
9.       Row()
10.         .backgroundColor(Color.Green)
11.         .width('80%')
12.         .height(70)
14.       Row()
15.         .backgroundColor(Color.Green)
16.         .width('80%')
17.         .height(70)
19.       Row()
20.         .backgroundColor(Color.Green)
21.         .width('80%')
22.         .height(70)
24.     }.width('100%')
25.     .height('100%')
26.     .backgroundColor('#eeeeee')
27.     .justifyContent(FlexAlign.Center)
28.   }
29. }

复制代码

1.3 常用属性

1.3.1 主轴方向排列方式

子元素沿主轴方向的排列方式可以通过justifyContent()方法进行设置，其参数类型为枚举类型FlexAlign，可选的枚举值有

示例代码：
pages/layout/linear目录，新建JustifyContent.ets文件

1. @Entry
2. @Component
3. struct AlignItemsPage {
5.   build() {
6.     Column({ space: 2 }) {
7.       Row()
8.         .backgroundColor(Color.Green)
9.         .width('80%')
10.         .height(70)
11.       Row()
12.         .backgroundColor(Color.Green)
13.         .width('80%')
14.         .height(70)
15.       Row()
16.         .backgroundColor(Color.Green)
17.         .width('80%')
18.         .height(70)
19.     }.width('100%')
20.     .height('100%')
21.     // 子元素沿主轴方向的排列方式
22.     // .justifyContent(FlexAlign.Center)
23.     // .justifyContent(FlexAlign.Start)
24.     // .justifyContent(FlexAlign.End)
25.     // .justifyContent(FlexAlign.SpaceBetween)
26.     // .justifyContent(FlexAlign.SpaceAround)
27.     .justifyContent(FlexAlign.SpaceEvenly)
28.   }
30. }

复制代码

1.3.2 交叉轴方向对齐方式

子元素沿交叉轴方向的对齐方式可以通过alignItems()方法进行设置，其参数类型，对于Column容器来讲是HorizontalAlign，对于Row容器来讲是VerticalAlign，两者都是枚举类型，可选择枚举值也都相同，具体内容如下

示例代码
pages/layout/linear目录，新建AlignItemsPage.ets文件

1. @Entry
2. @Component
3. // 线性布局交叉轴排列方式
4. struct AlignItemsPage {
6.   build() {
7.     Column({ space: 2 }) {
8.       Row()
9.         .backgroundColor(Color.Green)
10.         .width('80%')
11.         .height(70)
12.       Row()
13.         .backgroundColor(Color.Green)
14.         .width('80%')
15.         .height(70)
16.       Row()
17.         .backgroundColor(Color.Green)
18.         .width('80%')
19.         .height(70)
20.     }.width('100%')
21.     .height('100%')
22.     // 子元素沿交叉轴方向的对齐方式
23.     // 对于Column容器来讲是HorizontalAlign，对于Row容器来讲是VerticalAlign，两者都是枚举类型，可选择枚举值也都相同
24.     // .alignItems(HorizontalAlign.Start)
25.     // .alignItems(HorizontalAlign.Center)
26.     .alignItems(HorizontalAlign.End)
27.   }
28. }

复制代码

二、使用技巧

2.1 Blank组件

Blank可作为Column和Row容器的子组件，该组件不显示任何内容，并且会始终充满容器主轴方向上的剩余空间，效果如下：

示例代码：
拷贝icon_bluetooth.png到目录resources/base/media
pages/layout/linear目录下新建BlankPage.ets

1. @Entry
2. @Component
3. struct BlankPage {
5.   build() {
6.     Column({ space: 50 }) {
7.       Row() {
8.         Image($r('app.media.icon_bluetooth'))
9.           .width(30)
10.           .height(30)
11.         Text('蓝牙')
12.           .fontSize(20)
13.           .margin({ left: 5 })
14.         Blank()
15.         Toggle({ type: ToggleType.Switch })
16.       }
17.       .width('90%')
18.       .height(60)
19.       .backgroundColor(Color.White)
20.       .padding({ left: 10, right: 10 })
21.       .borderRadius(15)
22.       .shadow({ radius: 10 })
23.     }
24.     .width('100%')
25.     .height('100%')
26.     .justifyContent(FlexAlign.Center)
27.     .backgroundColor('#f2f2f2')
28.   }
29. }

复制代码

2.2 layoutWeight属性

layoutWeight属性可用于Column和Row容器的子组件，其作用是配置子组件在主轴方向上的尺寸权重。配置该属性后，子组件沿主轴方向的尺寸设置（width或height）将失效，具体尺寸根据权重进行计算，计算规则如下图所示：

示例代码：
pages/layout/linear目录下新建LayoutWeightPage.ets

1. @Entry
2. @Component
3.   // layoutWeight属性
4. struct LayoutWeightPage {
5.   build() {
6.     // layoutWeight 配置子组件在主轴方向上的尺寸权重。
7.     // 配置该属性后，子组件沿主轴方向的尺寸设置（width或height）将失效，具体尺寸根据权重进行计算
8.     Column() {
9.       //Header:高度60vp
10.       Row() {
11.         Text('Header')
12.           .fontSize(30)
13.       }.backgroundColor('#66008000')
14.       .justifyContent(FlexAlign.Center)
15.       .height(60)
16.       .width('100%')
18.       //Content:充满剩余空间
19.       Row() {
20.         Text('Content')
21.           .fontSize(30)
22.       }
23.       .backgroundColor('#66ffa200')
24.       .justifyContent(FlexAlign.Center)
25.       .width('100%')
26.       // .height(200)
27.       .layoutWeight(3)
29.       // Footer:高度60vp
30.       Row() {
31.         Text('Footer')
32.           .fontSize(30)
33.       }
34.       .backgroundColor('#660e9fba')
35.       .justifyContent(FlexAlign.Center)
36.       .width('100%')
37.       .height(60)
38.     }
39.     .width('100%')
40.     .height('100%')
41.     .justifyContent(FlexAlign.Center)
42.     .backgroundColor('#f2f2f2')
43.   }
44. }

复制代码

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！