鴻蒙HarmonyOS實戰-ArkUI元件（Row/Column）

🚀前言

HarmonyOS的佈局元件是一組用於構建使用者介面佈局的元件，包括線性佈局、相對佈局、網格佈局等。這些元件幫助開發者以簡單和靈活的方式管理和組織應用程式中的檢視，並支援多種不同的裝置螢幕尺寸和方向。使用HarmonyOS的佈局元件可以提高應用程式的可讀性和可維護性，並幫助快速構建適應不同裝置的使用者介面。

常見頁面結構圖：

不就元素組成：

🚀一、Row/Column

🔎1.線性佈局

線性佈局（LinearLayout）是一種常用的UI佈局方式，透過線性容器 Row 和 Column 構建。線性佈局是其他佈局的基礎，其子元素線上性方向上（水平方向和垂直方向）依次排列。線性佈局的排列方向由所選容器元件決定，Column 容器內子元素按照垂直方向排列，Row 容器內子元素按照水平方向排列。根據不同的排列方向，開發者可選擇使用 Row 或 Column 容器建立線性佈局。線性佈局的優點是可以根據不同的排列需求建立靈活的佈局，同時也方便管理子元素的位置和大小。

Column容器內子元素排列示意圖：

Row容器內子元素排列示意圖：

🔎2.間距

Column({ space: 20 }) 
Row({ space: 35 })

🔎3.對齊方式

🦋3.1 水平對齊

Column({}) {}.alignItems(HorizontalAlign.Start)

🦋3.2 垂直對齊

Column({}) {}.alignItems(VerticalAlign.Top)

🔎4.排列方式

🦋4.1 水平排列

Column({}) {}.justifyContent(FlexAlign.Start)

🦋4.2 垂直排列

Row({}) {}.justifyContent(FlexAlign.Start)

🔎5.自適應拉伸

🦋5.1 水平拉伸

因為自適應一般是講寬度，其實高度也行，但原理一樣

Column({}) {}.width('100%')

🔎6.自適應縮放

🦋6.1 權重

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

🦋6.2 百分比

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

🔎7.Scroll元件自適應延伸

🦋7.1 列自適應延伸

@Entry
@Component
struct ScrollExample {
  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) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }, item => item)
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滾動方向縱向
    .scrollBar(BarState.On) // 捲軸常駐顯示
    .scrollBarColor(Color.Gray) // 捲軸顏色
    .scrollBarWidth(10) // 捲軸寬度
    .edgeEffect(EdgeEffect.Spring) // 滾動到邊沿後回彈
  }
}

🦋7.2 行自適應延伸

@Entry
@Component
struct ScrollExample {
  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) => {
          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) // 滾動到邊沿後回彈
  }
}

🚀二、登入案例

build() {
  Column({space:20}) {
    Image( 'logo .png')
    TextInput({placeholder:'使用者名稱'})
    TextInput({placeholder:'密碼'})
      .type(InputType.Password)
      .showPasswordIcon(true)
    Button('登入')
    Row(){
      Checkbox()
      Text('記住我')
        .fontColor('#36D')
    }
  }
  .height('100%')
}

執行效果：

🚀寫在最後

• 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
• 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
• 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
• 想要獲取更多完整鴻蒙最新VIP學習資源以及最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY