自適應(yīng)布局

針對(duì)常見(jiàn)的開(kāi)發(fā)場(chǎng)景，方舟開(kāi)發(fā)框架提煉了七種自適應(yīng)布局能力，這些布局可以獨(dú)立使用，也可多種布局疊加使用。

下面我們依次介紹這幾種自適應(yīng)布局能力。

拉伸能力

拉伸能力是指容器組件尺寸發(fā)生變化時(shí)，增加或減小的空間全部分配給容器組件內(nèi)指定區(qū)域。

拉伸能力通常通過(guò)[Flex布局]中的flexGrow和flexShrink屬性實(shí)現(xiàn)，flexGrow和flexShink屬性常與flexBasis屬性搭配使用，故將這三個(gè)屬性放在一起介紹。

說(shuō)明：

• 開(kāi)發(fā)者期望將父容器的剩余空間全部分配給某空白區(qū)域時(shí)，也可以通過(guò)[Blank組件]實(shí)現(xiàn)。注意僅當(dāng)父組件為RowColumnFlex組件時(shí)，Blank組件才會(huì)生效。
• 類Web開(kāi)發(fā)范式也是通過(guò)flex-grow和flex-shrink實(shí)現(xiàn)拉伸能力，同時(shí)也支持配置flex-basis，詳見(jiàn)[通用樣式]。
• 類Web開(kāi)發(fā)范式?jīng)]有提供blank組件，但可以通過(guò)div組件模擬blank組件的行為，如“
  ”。

示例1

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

• 中間內(nèi)容區(qū)的寬度設(shè)置為400vp，同時(shí)將flexGrow屬性設(shè)置為1，flexShrink屬性設(shè)置為0。
• 兩側(cè)留白區(qū)的寬度設(shè)置為150vp，同時(shí)將flexGrow屬性設(shè)置為0，flexShrink屬性設(shè)置為1。

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

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

• 當(dāng)父容器的尺寸大于700vp時(shí)，父容器中多余的空間全部分配給中間內(nèi)容區(qū)。
• 當(dāng)父容器的尺寸小于700vp時(shí)，左右兩側(cè)的留白區(qū)按照“1:1”的比例收縮（即平均分配父容器的不足空間）。

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

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽纭?/span>
  @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() {
          // 通過(guò)flexGrow和flexShrink屬性，將多余的空間全部分配給圖片，將不足的控件全部分配給兩側(cè)空白區(qū)域。
          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

文字和開(kāi)關(guān)的尺寸固定，僅有中間空白區(qū)域（Blank組件）隨父容器尺寸變化而伸縮。

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

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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()      // 通過(guò)Blank組件實(shí)現(xiàn)拉伸能力
          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)
  }
}

均分能力

均分能力是指容器組件尺寸發(fā)生變化時(shí)，增加或減小的空間均勻分配給容器組件內(nèi)所有空白區(qū)域。它常用于內(nèi)容數(shù)量固定、均分顯示的場(chǎng)景，比如工具欄、底部菜單欄等。

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

說(shuō)明：

• 均分能力還可以通過(guò)其它方式實(shí)現(xiàn)，如使用[Grid網(wǎng)格組件]或在每個(gè)組件間添加Blank組件等。
• 類Web開(kāi)發(fā)范式中，通過(guò)將[div組件]的justify-content屬性設(shè)置為space-evenly來(lái)實(shí)現(xiàn)均分布局。

示例：

父容器尺寸變化過(guò)程中，圖標(biāo)及文字的尺寸不變，圖標(biāo)間的間距及圖標(biāo)離左右邊緣的距離同時(shí)均等改變。

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

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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)
  }
}

占比能力

占比能力是指子組件的寬高按照預(yù)設(shè)的比例，隨父容器組件發(fā)生變化。

占比能力通常有兩種實(shí)現(xiàn)方式：

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

layoutWeight存在使用限制，所以實(shí)際使用過(guò)程中大多通過(guò)將子組件寬高設(shè)置為父組件的百分比來(lái)實(shí)現(xiàn)占比能力。

說(shuō)明：

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

示例：

簡(jiǎn)單的播放控制欄，其中“上一首”、“播放/暫停”、“下一首”的layoutWeight屬性都設(shè)置為1，因此它們按照“1:1:1”的比例均分父容器主軸方向的空間。

將三個(gè)按鈕的.layoutWeight(1)分別替換為.width('33%')、.width('34%')、.width('33%')，也可以實(shí)現(xiàn)與當(dāng)前同樣的顯示效果。

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

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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)  // 設(shè)置子組件在父容器主軸方向的布局權(quán)重
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)

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

          Column() {
            Image($r("app.media.next"))
              .width(48)
              .height(48)
          }
          .height(96)
          .layoutWeight(1)  // 設(shè)置子組件在父容器主軸方向的布局權(quán)重
          .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)
  }
}

縮放能力

縮放能力是指子組件的寬高按照預(yù)設(shè)的比例，隨容器組件發(fā)生變化，且變化過(guò)程中子組件的寬高比不變。

縮放能力通過(guò)使用百分比布局配合 固定寬高比 （aspectRatio屬性）實(shí)現(xiàn)當(dāng)容器尺寸發(fā)生變化時(shí)，內(nèi)容自適應(yīng)調(diào)整。

可以訪問(wèn)[布局約束]，了解aspectRatio屬性的詳細(xì)信息。

說(shuō)明： 類Web開(kāi)發(fā)范式同樣提供了[aspect-ratio樣式]，用于固定組件的寬高比。

示例：

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

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

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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)
  }
}

延伸能力

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

延伸能力通常有兩種實(shí)現(xiàn)方式：

• 通過(guò)[List組件]實(shí)現(xiàn)。
• 通過(guò)[Scroll組件]配合[Row組件]或[Column組件]實(shí)現(xiàn)。

說(shuō)明：

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

示例：

當(dāng)父容器的尺寸發(fā)生改變時(shí)，頁(yè)面中顯示的圖標(biāo)數(shù)量隨之發(fā)生改變。

分別通過(guò)List組件實(shí)現(xiàn)及通過(guò)Scroll組件配合Row組件實(shí)現(xiàn)。

（1）通過(guò)List組件實(shí)現(xiàn)。

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

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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 }) {
        // 通過(guò)List組件實(shí)現(xiàn)隱藏能力
        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）通過(guò)Scroll組件配合Row組件實(shí)現(xiàn)。

@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]

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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() {
      // 通過(guò)Scroll和Row組件實(shí)現(xiàn)隱藏能力
      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)
  }
}

隱藏能力

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

隱藏能力通過(guò)設(shè)置 布局優(yōu)先級(jí) （displayPriority屬性）來(lái)控制顯隱，當(dāng)布局主軸方向剩余尺寸不足以滿足全部元素時(shí)，按照布局優(yōu)先級(jí)大小，從小到大依次隱藏，直到容器能夠完整顯示剩余元素。具有相同布局優(yōu)先級(jí)的元素將同時(shí)顯示或者隱藏。

可以訪問(wèn)[布局約束]，了解displayPriority屬性的詳細(xì)信息。

說(shuō)明： 類Web開(kāi)發(fā)范式同樣支持[display-index樣式]，用于設(shè)置布局優(yōu)先級(jí)。

示例：

父容器尺寸發(fā)生變化時(shí)，其子元素按照預(yù)設(shè)的優(yōu)先級(jí)顯示或隱藏。

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

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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)  // 布局優(yōu)先級(jí)

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

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

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

        Image($r("app.media.list"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(1)  // 布局優(yōu)先級(jí)
      }
      .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直接拿`

折行能力

折行能力是指容器組件尺寸發(fā)生變化，當(dāng)布局方向尺寸不足以顯示完整內(nèi)容時(shí)自動(dòng)換行。它常用于橫豎屏適配或默認(rèn)設(shè)備向平板切換的場(chǎng)景。

折行能力通過(guò)使用 Flex折行布局 （將wrap屬性設(shè)置為FlexWrap.Wrap）實(shí)現(xiàn)，當(dāng)橫向布局尺寸不足以完整顯示內(nèi)容元素時(shí)，通過(guò)折行的方式，將元素顯示在下方。

可以訪問(wèn)[Flex組件]，了解Flex組件的詳細(xì)用法。

說(shuō)明： 類Web開(kāi)發(fā)范式通過(guò)將[div組件]的flex-warp樣式設(shè)置為wrap來(lái)使用折行能力。

示例：

父容器中的圖片尺寸固定，當(dāng)父容器尺寸發(fā)生變化，其中的內(nèi)容做自適應(yīng)換行。

@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')
  ]

  // 底部滑塊，可以通過(guò)拖拽滑塊改變?nèi)萜鞒叽?/span>
  @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() {
        // 通過(guò)Flex組件warp參數(shù)實(shí)現(xiàn)自適應(yīng)折行
        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')
  }
}

審核編輯 黃宇