##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##

点击跳转《HarmonyOS Next快速入门》视频教程

介绍

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

基本概念

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

接口

行布局：Row，一行

Row(value?:{space?: number | string })

代码实例

@Entry
@Component
struct Index {
  build() {
    Row(){
      Text("1").fontSize(50).backgroundColor(Color.Orange)
      Text("2").fontSize(50).backgroundColor(Color.Green)
      Text("3").fontSize(50).backgroundColor(Color.Orange)
    }.height('100%')
  }
}

Row组件通过.justifyContent()属性方法在水平方向对齐子组件

列布局：Column，列

Column(value?: {space?: string | number})

代码实例

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text("1").fontSize(50).backgroundColor(Color.Orange)
      Text("2").fontSize(50).backgroundColor(Color.Green)
      Text("3").fontSize(50).backgroundColor(Color.Orange)
    }.height('100%').width('100%')
  }
}

整体代码实例：RowColumnPage

@Entry
@Component
struct RowColumnPage {
  @State message: string = '线性布局 (Row/Column)';

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text('行布局：').margin(10)
      Row({space:10}){
        Text('1').fontSize(50).backgroundColor(Color.Orange)
        Text('2').fontSize(50).backgroundColor(Color.Green)
        Text('3').fontSize(50).backgroundColor(Color.Orange)
      }.width("100%").justifyContent(FlexAlign.SpaceEvenly)

      Text('列布局：').margin({top:20,bottom:10})
      Column(){
        Text('1').fontSize(50).backgroundColor(Color.Orange).width('100%')
        Text('2').fontSize(50).backgroundColor(Color.Green).width('100%')
        Text('3').fontSize(50).backgroundColor(Color.Orange).width('100%')
      }.width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

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

@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: true })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  }
}

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

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).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(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

      Text('2:5:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xF5DEB3).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(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}