【基本概述】

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

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

在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

 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%')

【布局子元素在主轴上的排列方式】

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

Column容器内子元素在垂直方向上的排列演示：

 Column() {

  Column() {

  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {

  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {

  }.width('80%').height(50).backgroundColor(0xF5DEB3)

 }.width('100%').height(300).backgroundColor('rgb(242,242,242)')

 .justifyContent(FlexAlign.Start)

Row容器内子元素在水平方向上的排列演示：

 Row() {

  Column() {

  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {

  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {

  }.width('20%').height(30).backgroundColor(0xF5DEB3)

 }.width('100%').height(200).backgroundColor('rgb(242,242,242)')

 .justifyContent(FlexAlign.Start)

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

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

Column容器内子元素在水平方向上的排列演示：

 Column() {

  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.Start).backgroundColor('rgb(242,242,242)')

Row容器内子元素在垂直方向上的排列演示：

 Row() {

  Column() {

  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {

  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {

  }.width('20%').height(30).backgroundColor(0xF5DEB3)

 }.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')

【自适应拉伸】

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

 Column() {

   Row() {

     Text('Bluetooth').fontSize(18)

     Blank().backgroundColor('#000') /* 设置为黑色仅用于演示 */

     Toggle({ type: ToggleType.Switch, isOn: true })

  }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')

 }.backgroundColor(0xEFEFEF).padding(20).width('100%')

【自适应缩放】

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

 Column() {

   Row() {

     Text('test1').layoutWeight(1).backgroundColor('#ff13f3ac')

     Text('test2').layoutWeight(2).backgroundColor('#ff9a07e9')

     Text('test3').layoutWeight(3).backgroundColor('#ffdb2c4f')

  }.backgroundColor(0xFFFFFF).width('100%')

 }.backgroundColor(0xEFEFEF).padding(20).width('100%')

官方文档链接：

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