13、鸿蒙/布局/线性布局 (Row/Column)

2024-07-13 本文已影响0人圆梦人生

概述

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

Column.png

Row.png

基本概念

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

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

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

space.png

@Entry
@Component
struct Index {
  @State message: string = 'Hello World！';
  // 构建
  build() {
    // 列
    Column({space: 10}){
      // 水平排列
      Column(){
        Text("111")
      }.backgroundColor(Color.Red).width('100%');
      Column(){
        Text("222")
      }.backgroundColor(Color.Yellow).width('100%');
      Column(){
        Text("333")
      }.backgroundColor(Color.Gray).width('100%');
    }
  }
}

Row容器内排列方向上的间距

space.png

@Component
export struct RowLayout {
  //
  build() {
    //
    Row({space: 10}){
      Row(){
        Text('11').backgroundColor(Color.Red).width('30%')
      }
      Row(){
        Text('22').backgroundColor(Color.Yellow).width('30%')
      }
      Row(){
        Text('33').backgroundColor(Color.Gray).width('30%')
      }
    }.width('100%')
  }
}

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

在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。
alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

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

HorizontalAlign.png

@Component
export struct ColumnLayout {
  // 构建
  build() {
    // 列
    Column({space: 10}){
      // 水平排列
      Column(){
        Text("111")
      }.backgroundColor(Color.Red).width('50%');
      Column(){
        Text("222")
      }.backgroundColor(Color.Yellow).width('50%');
      Column(){
        Text("333")
      }.backgroundColor(Color.Gray).width('50%')
    }
    .width('100%')
    // 子元素在水平方向左对齐
    // .alignItems(HorizontalAlign.Start)
    // 子元素在水平方向居中对齐
    // .alignItems(HorizontalAlign.Center)
    // 子元素在水平方向右对齐
    .alignItems(HorizontalAlign.End)
  }
}

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

VerticalAlign.png

@Component
export struct RowLayout {
  //
  build() {
    //
    Row({space: 10}){
      Row(){
        Text('11').backgroundColor(Color.Red).width('30%')
      }
      Row(){
        Text('22').backgroundColor(Color.Yellow).width('30%')
      }
      Row(){
        Text('33').backgroundColor(Color.Gray).width('30%')
      }
    }.width('100%')
    .borderWidth(1)
    .borderStyle(BorderStyle.Solid)
    .borderColor(Color.Red)
    .height(100)
    // 子元素在垂直方向顶部对齐
    // .alignItems(VerticalAlign.Top)
    // 子元素在垂直方向居中对齐
    // .alignItems(VerticalAlign.Center)
    // 子元素在垂直方向底部对齐
    .alignItems(VerticalAlign.Bottom)
  }
}

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

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

justifyContent.png

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

Component
export struct ColumnLayout {
  // 构建
  build() {
    // 列
    Column({space: 10}){
      // 水平排列
      Column(){
        Text("111")
      }.backgroundColor(Color.Red).width('50%');
      Column(){
        Text("222")
      }.backgroundColor(Color.Yellow).width('50%');
      Column(){
        Text("333")
      }.backgroundColor(Color.Gray).width('50%')
    }
    .width('100%')
    // 子元素在水平方向左对齐
    // .alignItems(HorizontalAlign.Start)
    // 子元素在水平方向居中对齐
    // .alignItems(HorizontalAlign.Center)
    // 子元素在水平方向右对齐
    // .alignItems(HorizontalAlign.End)
    .height('50%')
    // 元素在垂直方向方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐
    // .justifyContent(FlexAlign.Start)
    // 元素在垂直方向方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同
    // .justifyContent(FlexAlign.Center)
    // 元素在垂直方向方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐
    // .justifyContent(FlexAlign.End)
    // 垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐
    // .justifyContent(FlexAlign.SpaceBetween)
    // 垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
    // .justifyContent(FlexAlign.SpaceAround)
    // 垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
    .justifyContent(FlexAlign.SpaceEvenly)
  }

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

justifyContent.png

@Component
export struct RowLayout {
  //
  build() {
    //
    Row({space: 10}){
      Row(){
        Text('11').backgroundColor(Color.Red).width('30%')
      }
      Row(){
        Text('22').backgroundColor(Color.Yellow).width('30%')
      }
      Row(){
        Text('33').backgroundColor(Color.Gray).width('30%')
      }
    }.width('100%')
    .borderWidth(1)
    .borderStyle(BorderStyle.Solid)
    .borderColor(Color.Red)
    .height(100)
    // 子元素在垂直方向顶部对齐
    // .alignItems(VerticalAlign.Top)
    // 子元素在垂直方向居中对齐
    // .alignItems(VerticalAlign.Center)
    // 子元素在垂直方向底部对齐
    // .alignItems(VerticalAlign.Bottom)
    // 元素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐
    // .justifyContent(FlexAlign.Start)
    // 元素在水平方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同
    // .justifyContent(FlexAlign.Center)
    // 元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐
    // .justifyContent(FlexAlign.End)
    // 水平方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
    // .justifyContent(FlexAlign.SpaceBetween)
    // 水平方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
    // .justifyContent(FlexAlign.SpaceAround)
    // 水平方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

自适应拉伸

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

Blank.png

@Component
export  struct ColumnBlank {
  build() {
    Column(){
     Row(){
       Text('111')
       Blank()
       Text('22')
     }.width('100%')
    }
  }
}

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

  @Component
  export struct LayoutWeight {
     build() {
       Column(){
         Row(){
             Text('文本一')
               .layoutWeight(2)
               .backgroundColor(Color.Red)
             Text('文本二')
               .layoutWeight(5)
               .backgroundColor(Color.Yellow)
             Text('文本三')
               .layoutWeight(3)
               .backgroundColor(Color.Gray)
         }
       }
     }
  }

父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。

@Component
export struct LayoutWeight {
 build() {
   Column(){
     //
     Row(){
       Text('文本一')
         .width('20%')
         .backgroundColor(Color.Red)
       Text('文本二')
         .width('50%')
         .backgroundColor(Color.Yellow)
       Text('文本三')
         .width('30%')
         .backgroundColor(Color.Gray)
     }
   }
 }
}

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

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

垂直方向布局中使用Scroll组件：

@Component
export struct ColumnScroll {
  private scroll: Scroller = new Scroller();
  private arr: number[] = [1,2,3,4,5,6,7,8,9,10]
  build() {
    //
    Scroll(this.scroll){
      Column(){
        ForEach(this.arr, (item?:number | undefined)=>{
          if(item){
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .textAlign(TextAlign.Center)
              .borderWidth(1)
              .borderColor(Color.Red)
          }
        }, (item: number) => item.toString())
      }.width('100%')
    }.backgroundColor(0xDCDCDC)
    // 滚动方向/垂直
    .scrollable(ScrollDirection.Vertical)
    // 常驻显示
    .scrollBar(BarState.On)
    // 滚动条颜色
    .scrollBarColor(Color.Orange)
    // 滚动条宽度
    .scrollBarWidth(8)
    // 回弹
    .edgeEffect(EdgeEffect.Spring)
  }
}

scroll.png

水平方向布局中使用Scroll组件：

@Component
export struct RowScroll {
  private scroll: Scroller = new Scroller();
  private arr: number[] = [1,2,3,4,5,6,7,8,9,10]
  build() {
    Scroll(this.scroll){
      Row(){
        ForEach(this.arr, (item?:number)=>{
          if(item){
            Text(item.toString())
              .height(150)
              .width(150)
              .borderWidth(1)
              .borderColor(Color.Red)
              .backgroundColor(0xFFFFFF)
              .margin({ left: 10 })
          }
        })
      }.height('180')
    }
    // 滚动方向/垂直
    .scrollable(ScrollDirection.Horizontal)
    // 常驻显示
    .scrollBar(BarState.On)
    // 滚动条颜色
    .scrollBarColor(Color.Orange)
    // 滚动条宽度
    .scrollBarWidth(8)
    // 回弹
    .edgeEffect(EdgeEffect.Spring)
  }
}