Arkts基础＜布局之线性布局＞

王延恺

503人浏览 · 2026-02-05 01:24:25

王延恺 · 2026-02-05 01:24:25 发布

在声明式UI中，所有的页面都是由自定义组件构成，我们可以根据自己的需求进行选择适合自己页面需求的布局进行开发。

布局结构

布局通常为分层结构，一个常见的页面结构如下所示：
在这里插入图片描述
怎么快速的去理解布局怎么搭建页面，这时候你可以把它想象成盖房子。page相当于房屋的地基是根本的存在，一切的布局（房间）都要在此之上搭建，能够理解这种方式，那么就可以根据UI图去拆解页面构成，下面将通过简单是使用案例，帮助大家理解线性、层叠、弹性、相对及栅格五种常见的布局。这一章讲最常用的布局——线性布局。

线性布局（Row、Column）

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

1、Column

@Entry
@ComponentV2
struct Index {
  build() {
    Column(){
      Text("这是线性布局：Column")
        .fontSize(16)
        .fontColor(Color.Red)
      // 使用网络图片时，需要配置网络权限
      Image("https://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280")
        .width(200)

      Button('按钮')
        .width(200)
        .height(50)
        .backgroundColor(Color.Orange)
    }
  }
}

代码展示效果:
在这里插入图片描述
1.2设置间距

Column({space: 20}){ // space设置容器内间距
      Text("这是文本一")
        .fontSize(16)
        .fontColor(Color.Red)
      Text("这是文本二")
        .fontSize(16)
        .fontColor(Color.Red)
      Button('按钮')
        .width(50)
        .height(50)
        .backgroundColor(Color.Orange)
    }

在这里插入图片描述
1.3、子元素排序

 Column(){
      Text("这是文本一")
        .fontSize(16)
        .fontColor(Color.Red)
      Text("这是文本二")
        .fontSize(16)
        .fontColor(Color.Red)
      Button('按钮')
        .width(50)
        .height(50)
        .backgroundColor(Color.Orange)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start) // 设置子元素垂直排列方式

FlexAlign支持：Start、Center、End、SpaceBetween、SpaceAround和SpaceEvenly，排序方式分别为：
在这里插入图片描述

 Column(){
      Text("这是文本一")
        .fontSize(16)
        .fontColor(Color.Red)
      Text("这是文本二")
        .fontSize(16)
        .fontColor(Color.Red)
      Button('按钮')
        .width(50)
        .height(50)
        .backgroundColor(Color.Orange)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.End) // 设置子元素水平排列方式
  }

HorizontalAlign支持：Start、Center和End，排序方式为：
在这里插入图片描述
2、Row

@Entry
@ComponentV2
struct Index {
  build() {
    Row(){
      Text("这是线性布局：Row")
        .fontSize(16)
        .fontColor(Color.Red)
      // 使用网络图片时，需要配置网络权限
      Image("https://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280")
        .width(100)

      Button('按钮')
        .width(50)
        .height(50)
        .backgroundColor(Color.Orange)
    }
  }
}

代码展示效果：
在这里插入图片描述

Row的子元素间距和水平排序方式与Column一致，但是垂直排序是通过VerticalAlign来进行设置，有Top（垂直方向顶部对齐）、Center（垂直方向居中对齐）和Bottom（垂直方向底部对齐），效果如下：
在这里插入图片描述

自适应拉伸

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

Row() {
      Text("自适应拉伸")
        .fontSize(16)
        .fontColor(Color.Red)

      Blank() // Blank会填充没有子组件的空白区域

      Button('按钮')
        .width(50)
        .height(50)
        .backgroundColor(Color.Orange)
    }.width('100%')
  }

代码效果：
在这里插入图片描述

自适应缩放

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

@Entry
@ComponentV2
struct Index {
  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%')
    }
  }
}

代码执行效果：
在这里插入图片描述

自适应延伸

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。对于线性布局，这种方法适用于容器中内容无法一屏展示的场景。通常有以下两种实现方式。
1、在List中添加滚动条：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。

@Entry
@ComponentV2
struct Index {
  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())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }
        }, (item:number) => item.toString())
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

在这里插入图片描述
2、使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。

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

  build() {
    Scroll(this.scroller) {
      Row() {
        ForEach(this.arr, (item?:number|undefined) => {
          if(item){
            Text(item.toString())
              .height('90%')
              .width(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ left: 10 })
          }
        })
      }.height('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Horizontal) // 滚动方向为水平方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}