線性布局（Row/Column）

2024-01-25 13:10 更新

概述

線性布局（LinearLayout）是開發(fā)中最常用的布局，通過線性容器Row和Column構(gòu)建。線性布局是其他布局的基礎(chǔ)，其子元素在線性方向上（水平方向和垂直方向）依次排列。線性布局的排列方向由所選容器組件決定，Column容器內(nèi)子元素按照垂直方向排列，Row容器內(nèi)子元素按照水平方向排列。根據(jù)不同的排列方向，開發(fā)者可選擇使用Row或Column容器創(chuàng)建線性布局。

圖1 Column容器內(nèi)子元素排列示意圖
圖2 Row容器內(nèi)子元素排列示意圖

基本概念

  • 布局容器：具有布局能力的容器組件，可以承載其他元素作為其子元素，布局容器會對其子元素進(jìn)行尺寸計(jì)算和布局排列。
  • 布局子元素：布局容器內(nèi)部的元素。
  • 主軸：線性布局容器在布局方向上的軸線，子元素默認(rèn)沿主軸排列。Row容器主軸為水平方向，Column容器主軸為垂直方向。
  • 交叉軸：垂直于主軸方向的軸線。Row容器交叉軸為垂直方向，Column容器交叉軸為水平方向。
  • 間距：布局子元素的間距。

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

在布局容器內(nèi)，可以通過space屬性設(shè)置排列方向上子元素的間距，使各子元素在排列方向上有等間距效果。

Column容器內(nèi)排列方向上的間距

圖3 Column容器內(nèi)排列方向的間距圖
  1. Column({ space: 20 }) {
  2.   Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  3.   Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  4.   Row().width('90%').height(50).backgroundColor(0xD2B48C)
  5.   Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  6. }.width('100%')

Row容器內(nèi)排列方向上的間距

圖4 Row容器內(nèi)排列方向的間距圖
  1. Row({ space: 35 }) {
  2.   Text('space: 35').fontSize(15).fontColor(Color.Gray)
  3.   Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  4.   Row().width('10%').height(150).backgroundColor(0xD2B48C)
  5.   Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  6. }.width('90%')

布局子元素在交叉軸上的對齊方式

在布局容器內(nèi)，可以通過alignItems屬性設(shè)置子元素在交叉軸（排列方向的垂直方向）上的對齊方式。且在各類尺寸屏幕中，表現(xiàn)一致。其中，交叉軸為垂直方向時，取值為VerticalAlign類型，水平方向取值為HorizontalAlign。

alignSelf屬性用于控制單個子元素在容器交叉軸上的對齊方式，其優(yōu)先級高于alignItems屬性，如果設(shè)置了alignSelf屬性，則在單個子元素上會覆蓋alignItems屬性。

Column容器內(nèi)子元素在水平方向上的排列

圖5 Column容器內(nèi)子元素在水平方向上的排列圖
  • HorizontalAlign.Start：子元素在水平方向左對齊。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')

  • HorizontalAlign.Center：子元素在水平方向居中對齊。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')

  • HorizontalAlign.End：子元素在水平方向右對齊。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').alignItems(HorizontalAlign.End).backgroundColor('rgb(242,242,242)')

Row容器內(nèi)子元素在垂直方向上的排列

圖6 Row容器內(nèi)子元素在垂直方向上的排列圖
  • VerticalAlign.Top：子元素在垂直方向頂部對齊。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')

  • VerticalAlign.Center：子元素在垂直方向居中對齊。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).alignItems(VerticalAlign.Center).backgroundColor('rgb(242,242,242)')

  • VerticalAlign.Bottom：子元素在垂直方向底部對齊。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')

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

在布局容器內(nèi)，可以通過justifyContent屬性設(shè)置子元素在容器主軸上的排列方式?？梢詮闹鬏S起始位置開始排布，也可以從主軸結(jié)束位置開始排布，或者均勻分割主軸的空間。

Column容器內(nèi)子元素在垂直方向上的排列

圖7 Column容器內(nèi)子元素在垂直方向上的排列圖
  • justifyContent(FlexAlign.Start)：元素在垂直方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)

  • justifyContent(FlexAlign.Center)：元素在垂直方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)

  • justifyContent(FlexAlign.End)：元素在垂直方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)

  • justifyContent(FlexAlign.Spacebetween)：垂直方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)

  • justifyContent(FlexAlign.SpaceAround)：垂直方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)

  • justifyContent(FlexAlign.SpaceEvenly)：垂直方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣。
    1. Column({}) {
    2.   Column() {
    3.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('80%').height(50).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('80%').height(50).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)

Row容器內(nèi)子元素在水平方向上的排列

圖8 Row容器內(nèi)子元素在水平方向上的排列圖
  • justifyContent(FlexAlign.Start)：元素在水平方向方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)

  • justifyContent(FlexAlign.Center)：元素在水平方向方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)

  • justifyContent(FlexAlign.End)：元素在水平方向方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)

  • justifyContent(FlexAlign.Spacebetween)：水平方向方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)

  • justifyContent(FlexAlign.SpaceAround)：水平方向方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)

  • justifyContent(FlexAlign.SpaceEvenly)：水平方向方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣。
    1. Row({}) {
    2.   Column() {
    3.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    4. 

    5.   Column() {
    6.   }.width('20%').height(30).backgroundColor(0xD2B48C)
    7. 

    8.   Column() {
    9.   }.width('20%').height(30).backgroundColor(0xF5DEB3)
    10. }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)

自適應(yīng)拉伸

在線性布局下，常用空白填充組件Blank，在容器主軸方向自動填充空白空間，達(dá)到自適應(yīng)拉伸效果。Row和Column作為容器，只需要添加寬高為百分比，當(dāng)屏幕寬高發(fā)生變化時，會產(chǎn)生自適應(yīng)效果。

  1. @Entry
  2. @Component
  3. struct BlankExample {
  4.   build() {
  5.     Column() {
  6.       Row() {
  7.         Text('Bluetooth').fontSize(18)
  8.         Blank()
  9.         Toggle({ type: ToggleType.Switch, isOn: true })
  10.       }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
  11.     }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  12.   }
  13. }
圖9 豎屏
圖10 橫屏

自適應(yīng)縮放

自適應(yīng)縮放是指子組件隨容器尺寸的變化而按照預(yù)設(shè)的比例自動調(diào)整尺寸，適應(yīng)各種不同大小的設(shè)備。在線性布局中，可以使用以下兩種方法實(shí)現(xiàn)自適應(yīng)縮放。

  • 父容器尺寸確定時，使用layoutWeight屬性設(shè)置子組件和兄弟元素在主軸上的權(quán)重，忽略元素本身尺寸設(shè)置，使它們在任意尺寸的設(shè)備下自適應(yīng)占滿剩余空間。
    1. @Entry
    2. @Component
    3. struct layoutWeightExample {
    4.   build() {
    5.     Column() {
    6.       Text('1:2:3').width('100%')
    7.       Row() {
    8.         Column() {
    9.           Text('layoutWeight(1)')
    10.             .textAlign(TextAlign.Center)
    11.         }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')
    12. 

    13.         Column() {
    14.           Text('layoutWeight(2)')
    15.             .textAlign(TextAlign.Center)
    16.         }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')
    17. 

    18.         Column() {
    19.           Text('layoutWeight(3)')
    20.             .textAlign(TextAlign.Center)
    21.         }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
    22. 

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

    25.       Text('2:5:3').width('100%')
    26.       Row() {
    27.         Column() {
    28.           Text('layoutWeight(2)')
    29.             .textAlign(TextAlign.Center)
    30.         }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')
    31. 

    32.         Column() {
    33.           Text('layoutWeight(5)')
    34.             .textAlign(TextAlign.Center)
    35.         }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')
    36. 

    37.         Column() {
    38.           Text('layoutWeight(3)')
    39.             .textAlign(TextAlign.Center)
    40.         }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
    41.       }.backgroundColor(0xffd306).height('30%')
    42.     }
    43.   }
    44. }
    圖11 橫屏

    圖12 豎屏

  • 父容器尺寸確定時，使用百分比設(shè)置子組件和兄弟元素的寬度，使他們在任意尺寸的設(shè)備下保持固定的自適應(yīng)占比。
    1. @Entry
    2. @Component
    3. struct WidthExample {
    4.   build() {
    5.     Column() {
    6.       Row() {
    7.         Column() {
    8.           Text('left width 20%')
    9.             .textAlign(TextAlign.Center)
    10.         }.width('20%').backgroundColor(0xF5DEB3).height('100%')
    11. 

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

    17.         Column() {
    18.           Text('right width 30%')
    19.             .textAlign(TextAlign.Center)
    20.         }.width('30%').backgroundColor(0xF5DEB3).height('100%')
    21.       }.backgroundColor(0xffd306).height('30%')
    22.     }
    23.   }
    24. }
    圖13 橫屏
    圖14 豎屏

自適應(yīng)延伸

自適應(yīng)延伸是指在不同尺寸設(shè)備下，當(dāng)頁面的內(nèi)容超出屏幕大小而無法完全顯示時，可以通過滾動條進(jìn)行拖動展示。這種方法適用于線性布局中內(nèi)容無法一屏展示的場景。通常有以下兩種實(shí)現(xiàn)方式。

  • 在List中添加滾動條：當(dāng)List子項(xiàng)過多一屏放不下時，可以將每一項(xiàng)子元素放置在不同的組件中，通過滾動條進(jìn)行拖動展示?？梢酝ㄟ^scrollBar屬性設(shè)置滾動條的常駐狀態(tài)，edgeEffect屬性設(shè)置拖動到內(nèi)容最末端的回彈效果。
  • 使用Scroll組件：在線性布局中，開發(fā)者可以進(jìn)行垂直方向或者水平方向的布局。當(dāng)一屏無法完全顯示時，可以在Column或Row組件的外層包裹一個可滾動的容器組件Scroll來實(shí)現(xiàn)可滑動的線性布局。
    垂直方向布局中使用Scroll組件：
    1. @Entry
    2. @Component
    3. struct ScrollExample {
    4.   scroller: Scroller = new Scroller();
    5.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    6. 

    7.   build() {
    8.     Scroll(this.scroller) {
    9.       Column() {
    10.         ForEach(this.arr, (item) => {
    11.           Text(item.toString())
    12.             .width('90%')
    13.             .height(150)
    14.             .backgroundColor(0xFFFFFF)
    15.             .borderRadius(15)
    16.             .fontSize(16)
    17.             .textAlign(TextAlign.Center)
    18.             .margin({ top: 10 })
    19.         }, item => item)
    20.       }.width('100%')
    21.     }
    22.     .backgroundColor(0xDCDCDC)
    23.     .scrollable(ScrollDirection.Vertical) // 滾動方向?yàn)榇怪狈较?/span>
    24.     .scrollBar(BarState.On) // 滾動條常駐顯示
    25.     .scrollBarColor(Color.Gray) // 滾動條顏色
    26.     .scrollBarWidth(10) // 滾動條寬度
    27.     .edgeEffect(EdgeEffect.Spring) // 滾動到邊沿后回彈
    28.   }
    29. }

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

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

    7.   build() {
    8.     Scroll(this.scroller) {
    9.       Row() {
    10.         ForEach(this.arr, (item) => {
    11.           Text(item.toString())
    12.             .height('90%')
    13.             .width(150)
    14.             .backgroundColor(0xFFFFFF)
    15.             .borderRadius(15)
    16.             .fontSize(16)
    17.             .textAlign(TextAlign.Center)
    18.             .margin({ left: 10 })
    19.         })
    20.       }.height('100%')
    21.     }
    22.     .backgroundColor(0xDCDCDC)
    23.     .scrollable(ScrollDirection.Horizontal) // 滾動方向?yàn)樗椒较?/span>
    24.     .scrollBar(BarState.On) // 滾動條常駐顯示
    25.     .scrollBarColor(Color.Gray) // 滾動條顏色
    26.     .scrollBarWidth(10) // 滾動條寬度
    27.     .edgeEffect(EdgeEffect.Spring) // 滾動到邊沿后回彈
    28.   }
    29. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號