大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI 提供了丰富的系统组件，用于制作鸿蒙原生应用 APP 的 UI，本文主要讲解 Column 和 Row 组件的使用以及线性布局的方法。
一、Column&Row 组件及线性布局
1.1 线性布局概述
线性布局（LinearLayout）是开发中最常用的布局，可通过容器组件Column和Row构建，其子组件会在垂直或者水平方向上进行线性排列，具体效果如下图所示
<center>列排列</center>
<center>行排列</center>
说明:
Column 和 Row 容器均有两个轴线，分别是主轴和交叉轴
1.2 Column&Row 参数
Column 和 Row 容器的参数类型为{space?: string | number}，开发者可通过space属性调整子元素在主轴方向上的间距，效果如下
<center>列间隔</center>
<center>行间隔</center>
示例代码：
pages 目录下新建 layout/linear 目录，新建 SpacePage.ets 文件
@Entry@Component// 线性布局struct SpacePage {
build() { // 通过space属性调整子元素在主轴方向上的间距 Column({ space: 150 }) { Row() .backgroundColor(Color.Green) .width('80%') .height(70)
Row() .backgroundColor(Color.Green) .width('80%') .height(70)
Row() .backgroundColor(Color.Green) .width('80%') .height(70)
}.width('100%') .height('100%') .backgroundColor('#eeeeee') .justifyContent(FlexAlign.Center) }}
复制代码
1.3 常用属性
1.3.1 主轴方向排列方式
子元素沿主轴方向的排列方式可以通过justifyContent()方法进行设置，其参数类型为枚举类型FlexAlign，可选的枚举值有
示例代码：
pages/layout/linear 目录，新建 JustifyContent.ets 文件
@Entry@Componentstruct AlignItemsPage {
build() { Column({ space: 2 }) { Row() .backgroundColor(Color.Green) .width('80%') .height(70) Row() .backgroundColor(Color.Green) .width('80%') .height(70) Row() .backgroundColor(Color.Green) .width('80%') .height(70) }.width('100%') .height('100%') // 子元素沿主轴方向的排列方式 // .justifyContent(FlexAlign.Center) // .justifyContent(FlexAlign.Start) // .justifyContent(FlexAlign.End) // .justifyContent(FlexAlign.SpaceBetween) // .justifyContent(FlexAlign.SpaceAround) .justifyContent(FlexAlign.SpaceEvenly) }
}
复制代码
1.3.2 交叉轴方向对齐方式
子元素沿交叉轴方向的对齐方式可以通过alignItems()方法进行设置，其参数类型，对于Column容器来讲是HorizontalAlign，对于Row容器来讲是VerticalAlign，两者都是枚举类型，可选择枚举值也都相同，具体内容如下
示例代码
pages/layout/linear 目录，新建 AlignItemsPage.ets 文件
@Entry@Component// 线性布局交叉轴排列方式struct AlignItemsPage {
build() { Column({ space: 2 }) { Row() .backgroundColor(Color.Green) .width('80%') .height(70) Row() .backgroundColor(Color.Green) .width('80%') .height(70) Row() .backgroundColor(Color.Green) .width('80%') .height(70) }.width('100%') .height('100%') // 子元素沿交叉轴方向的对齐方式 // 对于Column容器来讲是HorizontalAlign，对于Row容器来讲是VerticalAlign，两者都是枚举类型，可选择枚举值也都相同 // .alignItems(HorizontalAlign.Start) // .alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.End) }}
复制代码
二、使用技巧
2.1 Blank 组件
Blank 可作为 Column 和 Row 容器的子组件，该组件不显示任何内容，并且会始终充满容器主轴方向上的剩余空间，效果如下：
示例代码：
拷贝 icon_bluetooth.png 到目录 resources/base/media
pages/layout/linear 目录下新建 BlankPage.ets
@Entry@Componentstruct BlankPage {
build() { Column({ space: 50 }) { Row() { Image($r('app.media.icon_bluetooth')) .width(30) .height(30) Text('蓝牙') .fontSize(20) .margin({ left: 5 }) Blank() Toggle({ type: ToggleType.Switch }) } .width('90%') .height(60) .backgroundColor(Color.White) .padding({ left: 10, right: 10 }) .borderRadius(15) .shadow({ radius: 10 }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) .backgroundColor('#f2f2f2') }}
复制代码
2.2 layoutWeight 属性
layoutWeight属性可用于 Column 和 Row 容器的子组件，其作用是配置子组件在主轴方向上的尺寸权重。配置该属性后，子组件沿主轴方向的尺寸设置（width或height）将失效，具体尺寸根据权重进行计算，计算规则如下图所示：
示例代码：
pages/layout/linear 目录下新建 LayoutWeightPage.ets
@Entry@Component // layoutWeight属性struct LayoutWeightPage { build() { // layoutWeight 配置子组件在主轴方向上的尺寸权重。 // 配置该属性后，子组件沿主轴方向的尺寸设置（width或height）将失效，具体尺寸根据权重进行计算 Column() { //Header:高度60vp Row() { Text('Header') .fontSize(30) }.backgroundColor('#66008000') .justifyContent(FlexAlign.Center) .height(60) .width('100%')
//Content:充满剩余空间 Row() { Text('Content') .fontSize(30) } .backgroundColor('#66ffa200') .justifyContent(FlexAlign.Center) .width('100%') // .height(200) .layoutWeight(3)
// Footer:高度60vp Row() { Text('Footer') .fontSize(30) } .backgroundColor('#660e9fba') .justifyContent(FlexAlign.Center) .width('100%') .height(60) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) .backgroundColor('#f2f2f2') }}
复制代码
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论