自適應布局

針對常見的開發場景，方舟開發框架提煉了七種自適應布局能力，這些布局可以獨立使用，也可多種布局疊加使用。

下面我們依次介紹這幾種自適應布局能力。

拉伸能力

拉伸能力是指容器組件尺寸發生變化時，增加或減小的空間全部分配給容器組件內指定區域。

拉伸能力通常通過[Flex布局]中的flexGrow和flexShrink屬性實現，flexGrow和flexShink屬性常與flexBasis屬性搭配使用，故將這三個屬性放在一起介紹。

說明：

• 開發者期望將父容器的剩余空間全部分配給某空白區域時，也可以通過[Blank組件]實現。注意僅當父組件為RowColumnFlex組件時，Blank組件才會生效。
• 類Web開發范式也是通過flex-grow和flex-shrink實現拉伸能力，同時也支持配置flex-basis，詳見[通用樣式]。
• 類Web開發范式沒有提供blank組件，但可以通過div組件模擬blank組件的行為，如“
  ”。

示例1

本示例中的頁面由中間的內容區（包含一張圖片）以及兩側的留白區組成，各區域的屬性配置如下。

• 中間內容區的寬度設置為400vp，同時將flexGrow屬性設置為1，flexShrink屬性設置為0。
• 兩側留白區的寬度設置為150vp，同時將flexGrow屬性設置為0，flexShrink屬性設置為1。

由上可知，父容器的基準尺寸是700vp（150vp+400vp+150vp）。

可以通過拖動底部的滑動條改變父容器的尺寸，查看布局變化。

• 當父容器的尺寸大于700vp時，父容器中多余的空間全部分配給中間內容區。
• 當父容器的尺寸小于700vp時，左右兩側的留白區按照“1:1”的比例收縮（即平均分配父容器的不足空間）。

@Entry
@Component
struct FlexibleCapabilitySample1 {
  @State containerWidth: number = 402

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸。
  @Builder slider() {
    Slider({ value: this.containerWidth, min: 402, max: 1000, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.containerWidth = value;
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        Row() {
          // 通過flexGrow和flexShrink屬性，將多余的空間全部分配給圖片，將不足的控件全部分配給兩側空白區域。
          Row().width(150).height(400).backgroundColor('#FFFFFF')
            .flexGrow(0).flexShrink(1)
          Image($r("app.media.illustrator")).width(400).height(400)
            .objectFit(ImageFit.Contain)
            .backgroundColor("#66F1CCB8")
            .flexGrow(1).flexShrink(0)
          Row().width(150).height(400).backgroundColor('#FFFFFF')
            .flexGrow(0).flexShrink(1)
        }
        .width(this.containerWidth)
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)
      }

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

示例2

文字和開關的尺寸固定，僅有中間空白區域（Blank組件）隨父容器尺寸變化而伸縮。

@Entry
@Component
struct FlexibleCapabilitySample2 {
  @State rate: number = 0.8

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 30, max: 80, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.rate = value / 100;
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        Row() {
          Text('飛行模式')
            .fontSize(16)
            .width(135)
            .height(22)
            .fontWeight(FontWeight.Medium)
            .lineHeight(22)
          Blank()      // 通過Blank組件實現拉伸能力
          Toggle({ type: ToggleType.Switch })
            .width(36)
            .height(20)
        }
        .height(55)
        .borderRadius(12)
        .padding({ left: 13, right: 13 })
        .backgroundColor('#FFFFFF')
        .width(this.rate * 100 + '%')
      }

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

均分能力

均分能力是指容器組件尺寸發生變化時，增加或減小的空間均勻分配給容器組件內所有空白區域。它常用于內容數量固定、均分顯示的場景，比如工具欄、底部菜單欄等。

均分能力可以通過將[Row組件]、[Column組件]或[Flex組件]的justifyContent屬性設置為FlexAlign.SpaceEvenly實現，即子元素在父容器主軸方向等間距布局，相鄰元素之間的間距、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣。

說明：

• 均分能力還可以通過其它方式實現，如使用[Grid網格組件]或在每個組件間添加Blank組件等。
• 類Web開發范式中，通過將[div組件]的justify-content屬性設置為space-evenly來實現均分布局。

示例：

父容器尺寸變化過程中，圖標及文字的尺寸不變，圖標間的間距及圖標離左右邊緣的距離同時均等改變。

@Entry
@Component
struct EquipartitionCapabilitySample {
  readonly list: number [] = [0, 1, 2, 3]
  @State rate: number = 0.6

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 30, max: 60, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        // 均勻分配父容器主軸方向的剩余空間
        Row() {
          ForEach(this.list, (item:number) = > {
            Column() {
              Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
              Text('App name')
                .width(64)
                .height(30)
                .lineHeight(15)
                .fontSize(12)
                .textAlign(TextAlign.Center)
                .margin({ top: 8 })
                .padding({ bottom: 15 })
            }
            .width(80)
            .height(102)
            .flexShrink(1)
          })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
        // 均勻分配父容器主軸方向的剩余空間
        Row() {
          ForEach(this.list, (item:number) = > {
            Column() {
              Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
              Text('App name')
                .width(64)
                .height(30)
                .lineHeight(15)
                .fontSize(12)
                .textAlign(TextAlign.Center)
                .margin({ top: 8 })
                .padding({ bottom: 15 })
            }
            .width(80)
            .height(102)
            .flexShrink(1)
          })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
      }
      .width(this.rate * 100 + '%')
      .height(222)
      .padding({ top: 16 })
      .backgroundColor('#FFFFFF')
      .borderRadius(16)

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

占比能力

占比能力是指子組件的寬高按照預設的比例，隨父容器組件發生變化。

占比能力通常有兩種實現方式：

• 將子組件的寬高設置為父組件寬高的百分比，詳見[尺寸設置]及[長度類型]。
• 通過layoutWeight屬性配置互為兄弟關系的組件在父容器主軸方向的布局權重。
  • 當父容器尺寸確定時，其子組件按照開發者配置的權重比例分配父容器中主軸方向的空間。
  • 僅當父容器是Row、Column或者Flex時，layoutWeight屬性才會生效。
  • 設置layoutWeight屬性后，組件本身的尺寸會失效。比如同時設置了.width('40%')和.layoutWeight(1)，那么只有.layoutWeight(1)會生效。

layoutWeight存在使用限制，所以實際使用過程中大多通過將子組件寬高設置為父組件的百分比來實現占比能力。

說明：

• 占比能力在實際開發中使用的非常廣泛，可以通過很多不同的方式實現占比能力，如還可以通過[Grid組件]的columnsTemplate屬性設置網格容器中列的數量及其寬度比例，或通過配置子組件在柵格（本章后文將詳細介紹柵格系統）中占據不同的列數來實現占比能力。本小節僅介紹最基礎和常用的實現方式，局限性較大或比非常小眾的實現方式，本文不做展開介紹。
• 類Web開發范式同樣支持以百分比的形式設置組件的寬高，詳見[通用樣式]中關于width和height的介紹以及[長度類型介紹]。
• 與聲明式開發范式中的layoutWeight屬性類似，類Web開發范式提供了[flex-weight樣式]用于配置互為兄弟關系的組件在父容器主軸方向的布局權重。

示例：

簡單的播放控制欄，其中“上一首”、“播放/暫?！薄ⅰ跋乱皇住钡膌ayoutWeight屬性都設置為1，因此它們按照“1:1:1”的比例均分父容器主軸方向的空間。

將三個按鈕的.layoutWeight(1)分別替換為.width('33%')、.width('34%')、.width('33%')，也可以實現與當前同樣的顯示效果。

@Entry
@Component
struct ProportionCapabilitySample {
  @State rate: number = 0.5

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    Slider({ value: 100, min: 25, max: 50, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        Row() {
          Column() {
            Image($r("app.media.down"))
              .width(48)
              .height(48)
          }
          .height(96)
          .layoutWeight(1)  // 設置子組件在父容器主軸方向的布局權重
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)

          Column() {
            Image($r("app.media.pause"))
              .width(48)
              .height(48)
          }
          .height(96)
          .layoutWeight(1)  // 設置子組件在父容器主軸方向的布局權重
          .backgroundColor('#66F1CCB8')
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)

          Column() {
            Image($r("app.media.next"))
              .width(48)
              .height(48)
          }
          .height(96)
          .layoutWeight(1)  // 設置子組件在父容器主軸方向的布局權重
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
        }
        .width(this.rate * 100 + '%')
        .height(96)
        .borderRadius(16)
        .backgroundColor('#FFFFFF')
      }

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

縮放能力

縮放能力是指子組件的寬高按照預設的比例，隨容器組件發生變化，且變化過程中子組件的寬高比不變。

縮放能力通過使用百分比布局配合 固定寬高比 （aspectRatio屬性）實現當容器尺寸發生變化時，內容自適應調整。

可以訪問[布局約束]，了解aspectRatio屬性的詳細信息。

說明： 類Web開發范式同樣提供了[aspect-ratio樣式]，用于固定組件的寬高比。

示例：

為方便查看效果，示例中特意給Column組件加了邊框?？梢钥吹紺olumn組件隨著其Flex父組件尺寸變化而縮放的過程中，始終保持預設的寬高比，其中的圖片也始終正常顯示。

@Entry
@Component
struct ScaleCapabilitySample {
  @State sliderWidth: number = 400
  @State sliderHeight: number = 400

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    
    Slider({ value: this.sliderHeight, min: 100, max: 400, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.sliderHeight = value
      })
      .position({ x: '20%', y: '80%' })
      Slider({ value: this.sliderWidth, min: 100, max: 400, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.sliderWidth = value;
      })
      .position({ x: '20%', y: '87%' })
  }

  build() {
    Column() {
      Column() {
        Column() {
          Image($r("app.media.illustrator")).width('100%').height('100%')
        }
        .aspectRatio(1)                           // 固定寬高比
        .border({ width: 2, color: "#66F1CCB8"})  // 邊框，僅用于展示效果
      }
      .backgroundColor("#FFFFFF")
      .height(this.sliderHeight)
      .width(this.sliderWidth)
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor("#F1F3F5")
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

延伸能力

延伸能力是指容器組件內的子組件，按照其在列表中的先后順序，隨容器組件尺寸變化顯示或隱藏。它可以根據顯示區域的尺寸，顯示不同數量的元素。

延伸能力通常有兩種實現方式：

• 通過[List組件]實現。
• 通過[Scroll組件]配合[Row組件]或[Column組件]實現。

說明：

• List、Row或Column組件中子節點的在頁面顯示時就已經全部完成了布局計算及渲染，只不過受限于父容器尺寸，用戶只能看到一部分。隨著父容器尺寸增大，用戶可以看到的子節點數目也相應的增加。用戶還可以通過手指滑動觸發列表滑動，查看被隱藏的子節點。
• 類Web開發范式同樣可以使用[list組件]實現延伸能力。
• 類Web開發范式沒有提供scroll組件，但可以將[div組件]的overflow樣式設置為scroll（即div組件主軸方向上子元素的尺寸超過div組件本身的尺寸時進行滾動顯示）來模擬scroll組件的行為。

示例：

當父容器的尺寸發生改變時，頁面中顯示的圖標數量隨之發生改變。

分別通過List組件實現及通過Scroll組件配合Row組件實現。

（1）通過List組件實現。

@Entry
@Component
struct ExtensionCapabilitySample1 {
  @State rate: number = 0.60
  readonly appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Row({ space: 10 }) {
        // 通過List組件實現隱藏能力
        List({ space: 10 }) {
          ForEach(this.appList, (item:number) = > {
            ListItem() {
              Column() {
                Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
                Text('App name')
                  .width(64)
                  .height(30)
                  .lineHeight(15)
                  .fontSize(12)
                  .textAlign(TextAlign.Center)
                  .margin({ top: 8 })
                  .padding({ bottom: 15 })
              }.width(80).height(102)
            }.width(80).height(102)
          })
        }
        .padding({ top: 16, left: 10 })
        .listDirection(Axis.Horizontal)
        .width('100%')
        .height(118)
        .borderRadius(16)
        .backgroundColor(Color.White)
      }
      .width(this.rate * 100 + '%')

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

（2）通過Scroll組件配合Row組件實現。

@Entry
@Component
struct ExtensionCapabilitySample2 {
  private scroller: Scroller = new Scroller()
  @State rate: number = 0.60
  @State appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100;
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      // 通過Scroll和Row組件實現隱藏能力
      Scroll(this.scroller) {
        Row({ space: 10 }) {
          ForEach(this.appList, () = > {
            Column() {
              Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
              Text('App name')
                .width(64)
                .height(30)
                .lineHeight(15)
                .fontSize(12)
                .textAlign(TextAlign.Center)
                .margin({ top: 8 })
                .padding({ bottom: 15 })


            }.width(80).height(102)
          })
        }
        .padding({ top: 16, left: 10 })
        .height(118)
        .backgroundColor(Color.White)
      }
      .scrollable(ScrollDirection.Horizontal)
      .borderRadius(16)
      .width(this.rate * 100 + '%')

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

隱藏能力

隱藏能力是指容器組件內的子組件，按照其預設的顯示優先級，隨容器組件尺寸變化顯示或隱藏，其中相同顯示優先級的子組件同時顯示或隱藏。它是一種比較高級的布局方式，常用于分辨率變化較大，且不同分辨率下顯示內容有所差異的場景。主要思想是通過增加或減少顯示內容，來保持最佳的顯示效果。

隱藏能力通過設置 布局優先級 （displayPriority屬性）來控制顯隱，當布局主軸方向剩余尺寸不足以滿足全部元素時，按照布局優先級大小，從小到大依次隱藏，直到容器能夠完整顯示剩余元素。具有相同布局優先級的元素將同時顯示或者隱藏。

可以訪問[布局約束]，了解displayPriority屬性的詳細信息。

說明： 類Web開發范式同樣支持[display-index樣式]，用于設置布局優先級。

示例：

父容器尺寸發生變化時，其子元素按照預設的優先級顯示或隱藏。

@Entry
@Component
struct HiddenCapabilitySample {
  @State rate: number = 0.45

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 10, max: 45, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Row() {
        Image($r("app.media.favorite"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(1)  // 布局優先級

        Image($r("app.media.down"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(2)  // 布局優先級

        Image($r("app.media.pause"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(3)  // 布局優先級

        Image($r("app.media.next"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(2)  // 布局優先級

        Image($r("app.media.list"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(1)  // 布局優先級
      }
      .width(this.rate * 100 + '%')
      .height(96)
      .borderRadius(16)
      .backgroundColor('#FFFFFF')
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

折行能力

折行能力是指容器組件尺寸發生變化，當布局方向尺寸不足以顯示完整內容時自動換行。它常用于橫豎屏適配或默認設備向平板切換的場景。

折行能力通過使用 Flex折行布局 （將wrap屬性設置為FlexWrap.Wrap）實現，當橫向布局尺寸不足以完整顯示內容元素時，通過折行的方式，將元素顯示在下方。

可以訪問[Flex組件]，了解Flex組件的詳細用法。

說明： 類Web開發范式通過將[div組件]的flex-warp樣式設置為wrap來使用折行能力。

示例：

父容器中的圖片尺寸固定，當父容器尺寸發生變化，其中的內容做自適應換行。

@Entry
@Component
struct WrapCapabilitySample {
  @State rate: number = 0.7
  readonly imageList: Resource [] = [
    $r('app.media.flexWrap1'),
    $r('app.media.flexWrap2'),
    $r('app.media.flexWrap3'),
    $r('app.media.flexWrap4'),
    $r('app.media.flexWrap5'),
    $r('app.media.flexWrap6')
  ]

  // 底部滑塊，可以通過拖拽滑塊改變容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 50, max: 70, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '87%' })
  }

  build() {
    Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column }) {
      Column() {
        // 通過Flex組件warp參數實現自適應折行
        Flex({
          direction: FlexDirection.Row,
          alignItems: ItemAlign.Center,
          justifyContent: FlexAlign.Center,
          wrap: FlexWrap.Wrap
        }) {
          ForEach(this.imageList, (item:Resource) = > {
            Image(item).width(183).height(138).padding(10)
          })
        }
        .backgroundColor('#FFFFFF')
        .padding(20)
        .width(this.rate * 100 + '%')
        .borderRadius(16)
      }
      .width('100%')

      this.slider()
    }.width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }
}

審核編輯 黃宇