界面級一多能力有 2 類：

1. 自適應(yīng)布局: 略微調(diào)整界面結(jié)構(gòu)

2. 響應(yīng)式布局：比較大的界面調(diào)整

• 本文章先主要講解自適應(yīng)布局，響應(yīng)式布局再后面文章再細講。話不多說，開始了。

自適應(yīng)布局

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

自適應(yīng)布局類別	自適應(yīng)布局能力	使用場景	實現(xiàn)方式
自適應(yīng)拉伸	拉伸能力	容器組件尺寸發(fā)生變化時，增加或減小的空間全部分配給容器組件內(nèi)指定區(qū)域。	Flex布局的flexGrow和flexShrink屬性
	均分能力	容器組件尺寸發(fā)生變化時，增加或減小的空間均勻分配給容器組件內(nèi)所有空白區(qū)域。	Row組件、Column組件或Flex組件的justifyContent屬性設(shè)置為FlexAlign.SpaceEvenly
自適應(yīng)縮放	占比能力	子組件的寬或高按照預(yù)設(shè)的比例，隨容器組件發(fā)生變化。	基于通用屬性的兩種實現(xiàn)方式： - 將子組件的寬高設(shè)置為父組件寬高的百分比 - layoutWeight屬性
	縮放能力	子組件的寬高按照預(yù)設(shè)的比例，隨容器組件發(fā)生變化，且變化過程中子組件的寬高比不變。	布局約束的aspectRatio屬性
自適應(yīng)延伸	延伸能力	容器組件內(nèi)的子組件，按照其在列表中的先后順序，隨容器組件尺寸變化顯示或隱藏。	基于容器組件的兩種實現(xiàn)方式： - 通過List組件實現(xiàn) - 通過Scroll組件配合Row組件或Column組件實現(xiàn)
	隱藏能力	容器組件內(nèi)的子組件，按照其預(yù)設(shè)的顯示優(yōu)先級，隨容器組件尺寸變化顯示或隱藏。相同顯示優(yōu)先級的子組件同時顯示或隱藏。	布局約束的displayPriority屬性
自適應(yīng)折行	折行能力	容器組件尺寸發(fā)生變化時，如果布局方向尺寸不足以顯示完整內(nèi)容，自動換行。	Flex組件的wrap屬性設(shè)置為FlexWrap.Wrap

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

1. 拉伸能力

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

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

屬性	類型	默認值	描述
flexGrow	number	0	僅當(dāng)父容器寬度大于所有子組件寬度的總和時，該屬性生效。配置了此屬性的子組件，按照比例拉伸，分配父容器的多余空間。
flexShrink	number	1	僅當(dāng)父容器寬度小于所有子組件寬度的總和時，該屬性生效。配置了此屬性的子組件，按照比例收縮，分配父容器的不足空間。
flexBasis	auto | Length	auto	設(shè)置組件在Flex容器中主軸方向上基準尺寸。'auto’意味著使用組件原始的尺寸，不做修改。 flexBasis屬性不是必須的，通過width或height也可以達到同樣的效果。當(dāng)flexBasis屬性與width或height發(fā)生沖突時，以flexBasis屬性為準。

說明：

• 開發(fā)者期望將父容器的剩余空間全部分配給某空白區(qū)域時，也可以通過Blank組件實現(xiàn)。注意僅當(dāng)父組件為Row\Column\Flex組件時，Blank組件才會生效。

• 類Web開發(fā)范式也是通過flex-grow和flex-shrink實現(xiàn)拉伸能力，同時也支持配置flex-basis，詳見通用樣式。

• 類Web開發(fā)范式?jīng)]有提供blank組件，但可以通過div組件模擬blank組件的行為，如“<div style=‘flex-grow: 1; flex-shrink: 0; flex-basis: 0’></div>”。

示例1

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

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

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

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

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

• 當(dāng)父容器的尺寸大于700vp時，父容器中多余的空間全部分配給中間內(nèi)容區(qū)。

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

@Entry
@Component
struct FlexibleCapabilitySample1 {@State containerWidth: number = 402
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽纭?#64;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屬性，將多余的空間全部分配給圖片，將不足的控件全部分配給兩側(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

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

@Entry
@Component
struct FlexibleCapabilitySample2 {@State rate: number = 0.8
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;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組件實現(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)}
}

2. 均分能力

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

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

說明：

• 均分能力還可以通過其它方式實現(xiàn)，如使用Grid網(wǎng)格組件或在每個組件間添加Blank組件等。

• 類Web開發(fā)范式中，通過將div組件的justify-content屬性設(shè)置為space-evenly來實現(xiàn)均分布局。

示例：

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

@Entry
@Component
struct EquipartitionCapabilitySample {readonly list: number [] = [0, 1, 2, 3]@State rate: number = 0.6
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;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.icon")).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.icon")).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)}
}

3. 占比能力

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

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

• 將子組件的寬高設(shè)置為父組件寬高的百分比。

• 通過layoutWeight屬性配置互為兄弟關(guān)系的組件在父容器主軸方向的布局權(quán)重。

  • 當(dāng)父容器尺寸確定時，其子組件按照開發(fā)者配置的權(quán)重比例分配父容器中主軸方向的空間。

  • 僅當(dāng)父容器是Row、Column或者Flex時，layoutWeight屬性才會生效。

  • 設(shè)置layoutWeight屬性后，組件本身的尺寸會失效。比如同時設(shè)置了.width(‘40%’)和.layoutWeight(1)，那么只有.layoutWeight(1)會生效。

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

說明：

• 占比能力在實際開發(fā)中使用的非常廣泛，可以通過很多不同的方式實現(xiàn)占比能力，如還可以通過Grid組件的columnsTemplate屬性設(shè)置網(wǎng)格容器中列的數(shù)量及其寬度比例，或通過配置子組件在柵格（本章后文將詳細介紹柵格系統(tǒng)）中占據(jù)不同的列數(shù)來實現(xiàn)占比能力。

• 類Web開發(fā)范式同樣支持以百分比的形式設(shè)置組件的寬高。

• 與聲明式開發(fā)范式中的layoutWeight屬性類似，類Web開發(fā)范式提供了flex-weight樣式用于配置互為兄弟關(guān)系的組件在父容器主軸方向的布局權(quán)重。

示例：

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

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

@Entry
@Component
struct ProportionCapabilitySample {@State rate: number = 0.5
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;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)}
}

4. 縮放能力

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

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

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

示例：

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

@Entry
@Component
struct ScaleCapabilitySample {@State sliderWidth: number = 400@State sliderHeight: number = 400
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;Builder slider() {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: '80%' })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: '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)}
}

5. 延伸能力

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

延伸能力通常使用帶有滾動功能的組件來實現(xiàn)：

• 通過List組件實現(xiàn)。

• 通過Scroll組件配合Row組件或Column組件實現(xiàn)。

• 通過Grid組件，只設(shè)置行或只設(shè)置列也可以實現(xiàn)滾動，也能實現(xiàn)延伸。

說明：

• List、Row或Column組件中子節(jié)點的在頁面顯示時就已經(jīng)全部完成了布局計算及渲染，只不過受限于父容器尺寸，用戶只能看到一部分。隨著父容器尺寸增大，用戶可以看到的子節(jié)點數(shù)目也相應(yīng)的增加。用戶還可以通過手指滑動觸發(fā)列表滑動，查看被隱藏的子節(jié)點。

• 類Web開發(fā)范式同樣可以使用list組件實現(xiàn)延伸能力。

• 類Web開發(fā)范式?jīng)]有提供scroll組件，但可以將div組件的overflow樣式設(shè)置為scroll（即div組件主軸方向上子元素的尺寸超過div組件本身的尺寸時進行滾動顯示）來模擬scroll組件的行為。

示例：

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

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

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

@Entry
@Component
struct ExtensionCapabilitySample1 {@State rate: number = 0.60readonly appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;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組件實現(xiàn)隱藏能力List({ space: 10 }) {ForEach(this.appList, (item:number) => {ListItem() {Column() {Image($r("app.media.icon")).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組件實現(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]
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;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組件實現(xiàn)隱藏能力Scroll(this.scroller) {Row({ space: 10 }) {ForEach(this.appList, () => {Column() {Image($r("app.media.icon")).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).borderRadius(16).backgroundColor(Color.White)}.scrollable(ScrollDirection.Horizontal).width(this.rate * 100 + '%')
?this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

6. 隱藏能力

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

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

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

示例：

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

@Entry
@Component
struct HiddenCapabilitySample {@State rate: number = 0.45
?// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;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)先級
?Image($r("app.media.down")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(2)  // 布局優(yōu)先級
?Image($r("app.media.pause")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(3)  // 布局優(yōu)先級
?Image($r("app.media.next")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(2)  // 布局優(yōu)先級
?Image($r("app.media.list")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(1)  // 布局優(yōu)先級}.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)}
}

7. 折行能力

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

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

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

示例：

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

?

@Entry
@Component
struct WrapCapabilitySample {@State rate: number = 0.7readonly 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')]// 底部滑塊，可以通過拖拽滑塊改變?nèi)萜鞒叽?#64;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參數(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')}
}

以上就是自適應(yīng)布局的全部技巧，熟練掌握便可以應(yīng)付大多數(shù)自適應(yīng)布局場景了。