七、ArkTS 声明式UI-常用布局-线性布局（Column/Row）

ArkUI 线性布局（Column/Row）-官方文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-linear-V5

1. 概述

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

说明

Column和Row容器均有两个轴线，分别是主轴和交叉轴

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

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。 在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign类型。

基本概念

• 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
• 布局子元素：布局容器内部的元素。
• 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
• 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
• 间距：布局子元素的间距。

2. 参数

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

  Column({ space: 10 }) {
          Text('space: 10').fontSize(15).fontColor(Color.Gray)
          Column().width('80%').height(50).backgroundColor(0xF5DEB3)
          Column().width('80%').height(50).backgroundColor(0xD2B48C)
          Column().width('80%').height(50).backgroundColor(0xF5DEB3)   }.width('100%').alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')

   Row({ space: 10 }) {
          Text('space: 10').fontSize(15).fontColor(Color.Gray)
          Row().width('10%').height(150).backgroundColor(0xF5DEB3)
          Row().width('10%').height(150).backgroundColor(0xD2B48C)
          Row().width('10%').height(150).backgroundColor(0xF5DEB3)
        }.width('90%')

3. 常用属性

3.1. 子元素沿主轴方向的排列方式

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

3.2. 子元素沿交叉轴方向的对齐方式

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

4. 实用技巧

4.1. Blank组件的使用

在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。效果如下：

        Column() {
          Row() {
            Image($r('app.media.bluetooth')).width(25).height(25)
            Text('蓝牙').fontSize(18)
            Blank()
            Toggle({ type: ToggleType.Switch, isOn: true })
          }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
        }.backgroundColor(0xEFEFEF).padding(20).width('100%')

4.2. layoutWeight属性的使用

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。

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