鴻蒙應(yīng)用開發(fā)從入門到實戰(zhàn)（十四）：ArkUI組件Column&Row&線性布局

大家好，我是潘Sir，持續(xù)分享IT技術(shù)，幫你少走彎路。《鴻蒙應(yīng)用開發(fā)從入門到項目實戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級項目實戰(zhàn)等原創(chuàng)內(nèi)容、歡迎關(guān)注！

ArkUI提供了豐富的系統(tǒng)組件，用于制作鴻蒙原生應(yīng)用APP的UI，本文主要講解Column和Row組件的使用以及線性布局的方法。

一、Column&Row組件及線性布局

1.1 線性布局概述

? 線性布局（LinearLayout）是開發(fā)中最常用的布局，可通過容器組件Column和Row構(gòu)建，其子組件會在垂直或者水平方向上進行線性排列，具體效果如下圖所示

說明:

Column和Row容器均有兩個軸線，分別是主軸和交叉軸

• 主軸：線性布局容器在布局方向上的軸線，Row容器主軸為橫向，Column容器主軸為縱向。
• 交叉軸：垂直于主軸方向的軸線。Row容器交叉軸為縱向，Column容器交叉軸為橫向。

1.2 Column&Row參數(shù)

Column和Row容器的參數(shù)類型為{space?: string | number}，開發(fā)者可通過space屬性調(diào)整子元素在主軸方向上的間距，效果如下

示例代碼：

pages目錄下新建layout/linear目錄，新建SpacePage.ets文件

@Entry
@Component
// 線性布局
struct SpacePage {

  build() {
    // 通過space屬性調(diào)整子元素在主軸方向上的間距
    Column({ space: 150 }) {
      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)

      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)

      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)

    }.width('100%')
    .height('100%')
    .backgroundColor('#eeeeee')
    .justifyContent(FlexAlign.Center)
  }
}

1.3 常用屬性

1.3.1 主軸方向排列方式

子元素沿主軸方向的排列方式可以通過justifyContent()方法進行設(shè)置，其參數(shù)類型為枚舉類型FlexAlign，可選的枚舉值有

示例代碼：

pages/layout/linear目錄，新建JustifyContent.ets文件

@Entry
@Component
struct AlignItemsPage {

  build() {
    Column({ space: 2 }) {
      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)
      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)
      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)
    }.width('100%')
    .height('100%')
    // 子元素沿主軸方向的排列方式
    // .justifyContent(FlexAlign.Center)
    // .justifyContent(FlexAlign.Start)
    // .justifyContent(FlexAlign.End)
    // .justifyContent(FlexAlign.SpaceBetween)
    // .justifyContent(FlexAlign.SpaceAround)
    .justifyContent(FlexAlign.SpaceEvenly)
  }

}

1.3.2 交叉軸方向?qū)R方式

子元素沿交叉軸方向的對齊方式可以通過alignItems()方法進行設(shè)置，其參數(shù)類型，對于Column容器來講是HorizontalAlign，對于Row容器來講是VerticalAlign，兩者都是枚舉類型，可選擇枚舉值也都相同，具體內(nèi)容如下

示例代碼

pages/layout/linear目錄，新建AlignItemsPage.ets文件

@Entry
@Component
// 線性布局交叉軸排列方式
struct AlignItemsPage {

  build() {
    Column({ space: 2 }) {
      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)
      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)
      Row()
        .backgroundColor(Color.Green)
        .width('80%')
        .height(70)
    }.width('100%')
    .height('100%')
    // 子元素沿交叉軸方向的對齊方式
    // 對于Column容器來講是HorizontalAlign，對于Row容器來講是VerticalAlign，兩者都是枚舉類型，可選擇枚舉值也都相同
    // .alignItems(HorizontalAlign.Start)
    // .alignItems(HorizontalAlign.Center)
    .alignItems(HorizontalAlign.End)
  }
}

二、使用技巧

2.1 Blank組件

Blank可作為Column和Row容器的子組件，該組件不顯示任何內(nèi)容，并且會始終充滿容器主軸方向上的剩余空間，效果如下：

示例代碼：

拷貝icon_bluetooth.png到目錄resources/base/media

pages/layout/linear目錄下新建BlankPage.ets

@Entry
@Component
struct BlankPage {

  build() {
    Column({ space: 50 }) {
      Row() {
        Image($r('app.media.icon_bluetooth'))
          .width(30)
          .height(30)
        Text('藍(lán)牙')
          .fontSize(20)
          .margin({ left: 5 })
        Blank()
        Toggle({ type: ToggleType.Switch })
      }
      .width('90%')
      .height(60)
      .backgroundColor(Color.White)
      .padding({ left: 10, right: 10 })
      .borderRadius(15)
      .shadow({ radius: 10 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#f2f2f2')
  }
}

2.2 layoutWeight屬性

layoutWeight屬性可用于Column和Row容器的子組件，其作用是配置子組件在主軸方向上的尺寸權(quán)重。配置該屬性后，子組件沿主軸方向的尺寸設(shè)置（width或height）將失效，具體尺寸根據(jù)權(quán)重進行計算，計算規(guī)則如下圖所示：

示例代碼：

pages/layout/linear目錄下新建LayoutWeightPage.ets

@Entry
@Component
  // layoutWeight屬性
struct LayoutWeightPage {
  build() {
    // layoutWeight 配置子組件在主軸方向上的尺寸權(quán)重。
    // 配置該屬性后，子組件沿主軸方向的尺寸設(shè)置（width或height）將失效，具體尺寸根據(jù)權(quán)重進行計算
    Column() {
      //Header:高度60vp
      Row() {
        Text('Header')
          .fontSize(30)
      }.backgroundColor('#66008000')
      .justifyContent(FlexAlign.Center)
      .height(60)
      .width('100%')

      //Content:充滿剩余空間
      Row() {
        Text('Content')
          .fontSize(30)
      }
      .backgroundColor('#66ffa200')
      .justifyContent(FlexAlign.Center)
      .width('100%')
      // .height(200)
      .layoutWeight(3)

      // Footer:高度60vp
      Row() {
        Text('Footer')
          .fontSize(30)
      }
      .backgroundColor('#660e9fba')
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height(60)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#f2f2f2')
  }
}

《鴻蒙應(yīng)用開發(fā)從入門到項目實戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級項目實戰(zhàn)等原創(chuàng)內(nèi)容，防止迷路，歡迎關(guān)注！