ArkUI线性布局（Row和Columu容器）详解（附带实例）

线性布局是开发中最常用的布局方式，通过线性容器 Row 和 Column 构建。

线性布局是其他布局的基础，其子元素在线性方向（水平方向和垂直方向）上依次排列。线性布局的排列方向由所选容器组件决定：

Column 容器内子元素按照垂直方向排列（见下图）：


Row 容器内子元素按照水平方向排列（见下图）：


线性布局中的基础概念说明如下：

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

布局子元素在排列方向上的间距

在布局容器内，可以通过 space 属性设置排列方向上相邻两个子元素的间距，如图 3 和图 4 所示，使各子元素在排列方向上有等间距效果：


布局子元素在垂直方向上等间距排列的示例代码如下：

@Entry
@Component
struct LinearLayout {
    build() {
        // Column容器组件默认在垂直方向上从上向下对子组件进行布局
        // space的值设置为20，表示子组件之间的距离为20vp
        Column({ space: 20 }) {
            Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
            Row().width('90%').height(50).backgroundColor(0xF5DEB3)
            Row().width('90%').height(50).backgroundColor(0xD2B48C)
            Row().width('90%').height(50).backgroundColor(0xF5DEB3)
        }.width('100%')
    }
}

显示效果如下图所示：


布局子元素在水平方向上等间距排列的示例代码如下：

@Entry
@Component
struct LinearLayout {
    build() {
        // 默认情况下，Row对子组件在水平方向上从左向右布局
        // space设置为35，表示相邻两个子组件在主轴方向上的间距为35vp
        Row({ space: 35 }) {
            Text('space: 35').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%')
    }
}

显示效果如下图所示：

布局子元素在交叉轴上的对齐方式

在布局容器内，可以通过 alignItems 属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式，并且在各类尺寸屏幕中表现一致。

其中，当交叉轴为垂直方向时，取值为 VerticalAlign 类型；当交叉轴为水平方向时，取值为 HorizontalAlign 类型。

alignSelf 属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于 alignItems 属性。如果设置了 alignSelf 属性，则在单个子元素上会覆盖 alignItems 属性。

1) Column容器

Column 容器内子元素在水平方向上的排列如下图所示：


① HorizontalAlign.Start：Column 容器内子元素在水平方向上左对齐，示例代码如下：

@Entry
@Component
struct LinearLayout03 {
    build() {
        // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
        Column({}) {
            Column() {
            }.width('80%').height(50).backgroundColor(0xF5DEB3)
            // ...
        }
        .width('100%')
        // 设置列容器组件子元素在水平方向上左对齐
        .alignItems(HorizontalAlign.Start)
        .backgroundColor('rgb(242,242,242)')
    }
}

显示效果如下图所示：


② HorizontalAlign.Center：Column 容器内子元素在水平方向上居中对齐，示例代码如下：

@Entry
@Component
struct LinearLayout04 {
    build() {
        // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
        Column({}) {
            Column() {
            }.width('80%').height(50).backgroundColor(0xF5DEB3)
            // ...
        }
        .width('100%')
        // 设置列容器组件子元素在水平方向上居中对齐
        .alignItems(HorizontalAlign.Center)
        .backgroundColor('rgb(242,242,242)')
    }
}

显示效果如下图所示：


③ HorizontalAlign.End：Column 容器内子元素在水平方向上右对齐，示例代码如下：

@Entry
@Component
struct LinearLayout05 {
    build() {
      // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
      Column({}) {
          Column() {
          }.width('80%').height(50).backgroundColor(0xF5DEB3)
          // ...
      }
      .width('100%')
      // 设置列容器组件的子元素在水平方向上右对齐
      .alignItems(HorizontalAlign.End)
      .backgroundColor('rgb(242,242,242)')
   }
}

显示效果如下图所示：

2) Row容器

Row 容器内子元素在垂直方向上的排列如下图所示：


① VerticalAlign.Top：Row 容器内子元素在垂直方向上顶部对齐，示例代码如下：

@Entry
@Component
struct LinearLayout06 {
    build() {
        // 行容器组件默认情况下对子组件在水平方向上从左向右布局
        Row({}) {
            Column() {
            }.width('20%').height(30).backgroundColor(0xF5DEB3)
            // ...
        }
        .width('100%')
        .height(200)
        // 设置行容器子组件在垂直方向上顶部对齐
        .alignItems(VerticalAlign.Top)
        .backgroundColor('rgb(242,242,242)')
    }
}

显示效果如下图所示：


② VerticalAlign.Center：Row 容器内子元素在垂直方向上居中对齐，示例代码如下：

@Entry
@Component
struct LinearLayout07 {
    build() {
      // 行容器组件默认情况下对子组件在水平方向上从左向右布局
      Row({}) {
          Column() {
          }.width('20%').height(30).backgroundColor(0xF5DEB3)
          // ...
      }.width('100%').height(200)
      // 设置行容器组件的子组件在垂直方向上居中对齐
      .alignItems(VerticalAlign.Center)
      .backgroundColor('rgb(242,242,242)')
   }
}

显示效果如下图所示：


③ VerticalAlign.Bottom：Row 容器内子元素在垂直方向上底部对齐，示例代码如下：

@Entry
@Component
struct LinearLayout08 {
    build() {
        // 行容器组件默认情况下对子组件在水平方向上从左向右布局
        Row({}) {
            Column() {
            }.width('20%').height(30).backgroundColor(0xF5DEB3)
            // ...
        }.width('100%').height(200)
        // 设置行容器组件的子组件在垂直方向上底部对齐
        .alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')
    }
}

显示效果如下图所示：

布局子元素在主轴上的对齐方式

在布局容器内，可以通过 justifyContent 属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。

1) Column

Column 容器内子元素在垂直方向上的排列如下图所示：


下面介绍 justifyContent(FlexAlign.Start) 和 justifyContent(FlexAlign.SpaceBetween) 两种对齐方式，其余方式省略。

① justifyContent(FlexAlign.Start)：Column 容器内子元素在垂直方向上顶部对齐，第一个元素与顶部对齐，后续元素依次与前一个对齐，示例代码如下：

@Entry
@Component
struct LinearLayout09 {
    build() {
        // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
        Column({}) {
            Column() {
            }.width('80%').height(50).backgroundColor(0xF5DEB3)
            // ...
       }.width('100%').height(300)
      .backgroundColor('rgb(242,242,242)')
      // 设置列容器组件的子组件在垂直方向上顶部对齐
      // 第一个元素与顶部对齐，后续元素依次与前一个对齐
      .justifyContent(FlexAlign.Start)
   }
}

显示效果如下图所示：


② justifyContent(FlexAlign.SpaceBetween)：Column 容器内子元素在垂直方向上均匀分配，相邻两个元素之间距离相同。第一个元素与容器顶部对齐，最后一个元素与容器底部对齐，示例代码如下：

@Entry
@Component
struct LinearLayout12 {
   build() {
      // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
      Column({}) {
          Column() {
          }.width('80%').height(50).backgroundColor(0xF5DEB3)
          // ...
      }.width('100%').height(300).backgroundColor('rgb(242,242,242)')
      // 垂直方向均匀分配元素，相邻两个元素之间距离相同
      // 第一个元素与容器顶部对齐，最后一个元素与容器底部对齐
      .justifyContent(FlexAlign.SpaceBetween)
   }
}

显示效果如下图所示：

2) Row容器

Row 容器内子元素在水平方向上的排列如下图所示：


下面介绍 justifyContent(FlexAlign.Start) 和 justifyContent(FlexAlign.SpaceBetween) 两种对齐方式，其余方式省略。

① justifyContent(FlexAlign.Start)：Row 容器内子元素在水平方向上左对齐，第一个元素与容器左侧对齐，后续元素依次与前一个对齐，示例代码如下：

@Entry
@Component
struct LinearLayout15 {
    build() {
        // 行容器组件默认情况下对子组件在水平方向上从左向右布局
        Row({}) {
            Column() {
            }.width('20%').height(30).backgroundColor(0xF5DEB3)
            // ...
        }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
        // 设置行容器组件的子组件在水平方向上左对齐
        // 第一个元素与容器左侧对齐，后续元素依次与前一个对齐
       .justifyContent(FlexAlign.Start)
   }
}

显示效果如下图所示：


② justifyContent(FlexAlign.SpaceBetween)：Row 容器内子元素在水平方向上均匀分配，相邻两个元素之间距离相同。第一个元素与容器左侧对齐，最后一个元素与容器右侧对齐，示例代码如下：

@Entry
@Component
struct LinearLayout18 {
    build() {
        // 行容器组件默认情况下对子组件在水平方向上从左向右布局
        Row({}) {
            Column() {
            }.width('20%').height(30).backgroundColor(0xF5DEB3)
            // ...
        }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
        // 设置行容器子组件在水平方向上均匀分配，
        // 相邻两个元素之间距离相同。第一个元素与容器左侧对齐，最后一个元素与容器右侧对齐。
        .justifyContent(FlexAlign.SpaceBetween)
    }
}

显示效果如下图所示：

自适应拉伸

在线性布局下，常用空白填充组件——Blank 在容器主轴方向上自动填充空白空间，达到自适应拉伸效果。

在 Row 和 Column 容器中，只需要添加宽高百分比，当屏幕宽高发生变化时，就会产生自适应拉伸效果。示例代码如下：

@Entry
@Component
struct LinearLayout21 {
    build() {
        // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
        Column() {
            Row() {
                Text('Bluetooth').fontSize(18)
                // 空白填充组件Blank在容器主轴方向自动填充空白空间，达到自适应拉伸效果
                Blank()
                Toggle({ type: ToggleType.Switch, isOn: true })
            }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left:12 }).width('100%')
        }.backgroundColor(0xEFEFEF).padding(20).width('100%')
    }
}

显示效果如图 21 和图 22 所示。

自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，以适应不同屏幕大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。

1) 当父容器尺寸确定时，使用 layoutWeight 属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身的尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。示例代码如下：

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Column() {
        Text('1:2:3').width('100%');
        Row() {
          Column() {
            Text('layoutWeight(1)')
              .textAlign(TextAlign.Center)
          }.layoutWeight(1)
          .backgroundColor(0x5DEB3).height('100%');
         
          Column() {
            Text('layoutWeight(2)')
              .textAlign(TextAlign.Center)
          }.layoutWeight(2)
          .backgroundColor(0xD2B48C).height('100%');
         
          Column() {
            Text('layoutWeight(3)')
              .textAlign(TextAlign.Center)
          }.layoutWeight(3)
          .backgroundColor(0x5DEB3).height('100%');         
        }.backgroundColor(0xffd306).height('30%');

        Text('2:5:3').width('100%');
        Row() {
          Column() {
            Text('layoutWeight(2)')
              .textAlign(TextAlign.Center)
          }.layoutWeight(2)
          .backgroundColor(0x5DEB3).height('100%');
         
          Column() {
            Text('layoutWeight(5)')
              .textAlign(TextAlign.Center)
          }.layoutWeight(5)
          .backgroundColor(0xD2B48C).height('100%');
         
          Column() {
            Text('layoutWeight(3)')
              .textAlign(TextAlign.Center)
          }.layoutWeight(3)
          .backgroundColor(0x5DEB3).height('100%');
        }.backgroundColor(0xffd306).height('30%');
      }
    }
  }
}

显示效果如图 23 和图 24 所示：


2) 当父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使它们在任意尺寸的设备下保持固定的自适应占比。示例代码如下：

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%') // 设置该组件宽度为父组件宽度的 20%
        .backgroundColor(0xF5DEB3).height('100%')
       
        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%') // 设置该组件宽度为父组件宽度的 50%
        .backgroundColor(0xD2B48C).height('100%')
       
        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%') // 设置该组件的宽度为父组件宽度的 30%
        .backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%') 
    }
  }
}

显示效果如图 25 和图 26 所示。

自适应延伸

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。

通常有以下两种实现方式：

• 在 List 中添加滚动条：当 List 子项目过多不能一屏展示时，可以将每一个子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过 scrollBar 属性设置滚动条的常驻状态，通过 edgeEffect 属性设置拖动到内容最末端的回弹效果；
• 使用 Scroll 组件：当一屏无法完全显示时，可以在 Column 或 Row 组件的外层包裹一个可滚动的容器组件 Scroll，来实现可滑动的线性布局。

在垂直方向布局中使用 Scroll 组件的示例代码如下：

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item?: number | undefined) => {
          if (item) {
            Text(item.toString())
              // ...
          }
        }, (item: number) => item.toString())
      }
      .width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

显示效果如下图所示：