3.1. 自適應佈局
自適應佈局
自適應佈局的能力有 7 種,主要解決的是：窗口尺寸在【一定範圍內】變化時，頁面能夠正常顯示
|
自適應佈局能力 |
使用場景 |
實現方式 |
|
拉伸能力 |
容器組件尺寸發生變化時，增加或減小的空間全部分配給容器組件內指定區域。 |
Flex佈局 的flexGrow和flexShrink屬性 |
|
均分能力 |
容器組件尺寸發生變化時，增加或減小的空間均勻分配給容器組件內所有空白區域。 |
Row組件 、Column組件 或Flex組件 的justifyContent屬性設置為FlexAlign.SpaceEvenly |
|
佔比能力 |
子組件的寬或高按照預設的比例，隨容器組件發生變化。 |
基於通用屬性的兩種實現方式：
|
|
縮放能力 |
子組件的寬高按照預設的比例，隨容器組件發生變化，且變化過程中子組件的寬高比不變。 |
佈局約束 的aspectRatio屬性 |
|
延伸能力 |
容器組件內的子組件，按照其在列表中的先後順序，隨容器組件尺寸變化顯示或隱藏。 |
基於容器組件的兩種實現方式：
實現
配合Row組件 或Column組件 實現 |
|
隱藏能力 |
容器組件內的子組件，按照其預設的顯示優先級，隨容器組件尺寸變化顯示或隱藏。相同顯示優先級的子組件同時顯示或隱藏。 |
佈局約束 的displayPriority屬性 |
|
折行能力 |
容器組件尺寸發生變化時，如果佈局方向尺寸不足以顯示完整內容，自動換行。 |
Flex組件 的wrap屬性設置為FlexWrap.Wrap |
3.1.1. 拉伸能力
Flex佈局
編輯
拉伸能力指的是容器尺寸發生變化時：將變化的空間，分配給容器內的【指定區域】。利用的是 2 個屬性:
|
屬性名 |
類型 |
必填 |
説明 |
|
flexGrow |
number |
是 |
設置父容器在主軸方向上的剩餘空間分配給此屬性所在組件的比例。
|
|
flexShrink |
number |
是 |
設置父容器壓縮尺寸分配給此屬性所在組件的比例。
|
需求：
1. 空間不足時：分配給左右，1：1
2. 空間富餘時：分配給中間
測試代碼:
@Entry
@Component
struct Demo01 {
// 綁定的寬度-默認 600
@State containerWidth: number = 600
// 底部滑塊，可以通過拖拽滑塊改變容器尺寸。
@Builder
sliderBuilder() {
Slider({
value: this.containerWidth, // 綁定的值
min: 400, // 最小值
max: 1000, // 最大值
style: SliderStyle.OutSet // 滑塊在滑軌上
})
.blockColor(Color.White)
.width('60%')
.position({ x: '20%', y: '80%' })
.onChange((value)=>{
this.containerWidth = value
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
// 標記現在的寬度
Text('寬度:' + this.containerWidth)
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
// 核心區域
Column() {
Column() {
Row() {
// 佈局能l力 1：拉伸能力：
// 容器組件尺寸發生改變時，將變化的部分分配給容器內的【指定區域】
//
// 涉及屬性：
// flexShrink:壓縮比例，默認值：Column，Row 時（0），Flex 時（1）
// flexGrow:拉伸比例，默認值 0
// 需求：
// 1. 空間不足時：分配給左右，1：1
// 2. 空間富餘時：分配給中間
// 左
Row() {
Text('左')
.fontSize(20)
.fontColor(Color.White)
}
.justifyContent(FlexAlign.Center)
.width(150)
.height(290)
.backgroundColor('#c2baa6')
// 中
Row() {
Text('中')
.fontSize(30)
.fontColor(Color.White)
}
.width(300)
.height(290)
.backgroundColor('#68a67d')
.justifyContent(FlexAlign.Center)
// 右
Row() {
Text('右')
.fontSize(20)
.fontColor(Color.White)
}
.justifyContent(FlexAlign.Center)
.width(150)
.height(290)
.backgroundColor('#c2baa6')
}
.width(this.containerWidth)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.border({ width: 2, color: Color.Orange })
.backgroundColor(Color.Black)
}
// 底部滑塊
this.sliderBuilder()
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
}
}
@Entry
@Component
struct Demo01 {
// 綁定的寬度-默認 600
@State containerWidth: number = 600
// 底部滑塊，可以通過拖拽滑塊改變容器尺寸。
@Builder
sliderBuilder() {
Slider({
value: this.containerWidth, // 綁定的值
min: 400, // 最小值
max: 1000, // 最大值
style: SliderStyle.OutSet // 滑塊在滑軌上
})
.blockColor(Color.White)
.width('60%')
.position({ x: '20%', y: '80%' })
.onChange((value)=>{
this.containerWidth = value
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
// 標記現在的寬度
Text('寬度:' + this.containerWidth)
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
// 核心區域
Column() {
Column() {
Row() {
// 左
Row() {
Text('左')
.fontSize(20)
.fontColor(Color.White)
}
.justifyContent(FlexAlign.Center)
.width(150)
.height(290)
.backgroundColor('#c2baa6')
.flexShrink(1)
// 中
Row() {
Text('中')
.fontSize(30)
.fontColor(Color.White)
}
.width(300)
.height(290)
.backgroundColor('#68a67d')
.justifyContent(FlexAlign.Center)
.flexGrow(1)
// 右
Row() {
Text('右')
.fontSize(20)
.fontColor(Color.White)
}
.justifyContent(FlexAlign.Center)
.width(150)
.height(290)
.backgroundColor('#c2baa6')
.flexShrink(1)
}
.width(this.containerWidth)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.border({ width: 2, color: Color.Orange })
.backgroundColor(Color.Black)
}
// 底部滑塊
this.sliderBuilder()
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
}
}
3.1.2. 均分能力
編輯
均分能力指的是容器尺寸發生變化時：將變化的空間，【均勻分配】給容器組件內【空白區域】。利用的是一個屬性justifyContent，只能用在容器：Flex、Column、Row 上，將他設置為 SpaceEvenly即可
|
枚舉名稱 |
描述 |
|
Start |
元素在主軸方向首端對齊，第一個元素與行首對齊，同時後續的元素與前一個對齊。 |
|
Center |
元素在主軸方向中心對齊，第一個元素與行首的距離與最後一個元素與行尾距離相同。 |
|
End |
元素在主軸方向尾部對齊，最後一個元素與行尾對齊，其他元素與後一個對齊。 |
|
SpaceBetween |
Flex主軸方向均勻分配彈性元素，相鄰元素之間距離相同。第一個元素與行首對齊，最後一個元素與行尾對齊。 |
|
SpaceAround |
Flex主軸方向均勻分配彈性元素，相鄰元素之間距離相同。第一個元素到行首的距離和最後一個元素到行尾的距離是相鄰元素之間距離的一半。 |
|
SpaceEvenly |
Flex主軸方向均勻分配彈性元素，相鄰元素之間的距離、第一個元素與行首的間距、最後一個元素到行尾的間距都完全一樣。 |
測試代碼:
export interface NavItem {
id: number
icon: ResourceStr
title: string
}
@Entry
@Component
struct Demo02 {
readonly list: NavItem [] = [
{ id: 1, icon: $r('app.media.ic_nav_01'), title: '淘金幣' },
{ id: 2, icon: $r('app.media.ic_nav_02'), title: '搖現金' },
{ id: 3, icon: $r('app.media.ic_nav_03'), title: '閒魚' },
{ id: 4, icon: $r('app.media.ic_nav_04'), title: '中通快遞' },
]
@State rate: number = 600
// 底部滑塊，可以通過拖拽滑塊改變容器尺寸
@Builder
sliderBuilder() {
Slider({
value: this.rate,
min: 200,
max: 600,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.width('60%')
.position({ x: '20%', y: '80%' })
.onChange((value)=>{
this.rate = value
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
// 標記現在的寬度
Text('寬度:' + this.rate.toFixed(0))
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
Column() {
Column() {
// 佈局能力 2：均分能力
// 指容器組件尺寸發生變化時，增加或減小的空間均勻分配給容器組件內所有【空白區域】。
// 常用於內容數量固定、均分顯示的場景，比如工具欄、底部菜單欄、導航欄等
// 涉及屬性:
// Row、Column、Flex 組件的 justifyContent 屬性
// justifyContent設置為 FlexAlign.SpaceEvenly即可
Row() {
ForEach(this.list, (item: NavItem) => {
Column() {
Image(item.icon)
.width(48)
.height(48)
.margin({ top: 8 })
Text(item.title)
.width(64)
.height(30)
.lineHeight(15)
.fontSize(12)
.textAlign(TextAlign.Center)
.margin({ top: 8 })
.padding({ bottom: 15 })
}
.width(80)
.height(102)
.backgroundColor('#8FBF9F')
.borderRadius(10)
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
}
.width(this.rate) // 綁定滑塊改變的尺寸
.padding({ top: 16 })
.backgroundColor(Color.Pink)
.borderRadius(16)
this.sliderBuilder()
}
.width('100%')
.height('100%')
.backgroundColor('#F1F3F5')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
}
3.1.3. 佔比能力
編輯
佔比能力是指子組件的【寬高】按照【預設的比例】，隨父容器組件發生變化。實現的方式有 2 種：
- 寬高設置為百分比
- 設置layoutWeight
|
屬性名 |
類型 |
必填 |
説明 |
|
width |
Length |
是 |
要設置的組件寬度。
|
|
height |
Length |
是 |
要設置的組件高度。
|
|
layoutWeight |
number | string |
是 |
父容器尺寸確定時，設置了layoutWeight屬性的子元素與兄弟元素佔主軸尺寸按照權重進行分配，忽略元素本身尺寸設置，表示自適應佔滿剩餘空間。
|
測試代碼：
@Entry
@Component
struct Demo03 {
@State rate: number = 200
// 底部滑塊，可以通過拖拽滑塊改變容器尺寸
@Builder
slider() {
Slider({
value: this.rate,
min: 200,
max: 500,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.width('60%')
.height(50)
.position({ x: '20%', y: '80%' })
.onChange((value)=>{
this.rate = value
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
// 顯示目前容器的寬度
Text('寬度:' + this.rate.toFixed(0))
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
Column() {
// 佈局能力 3：佔比能力
// 子組件的寬高按照預設的比例，隨父容器組件發生變化
// 實現方式：
// 1. 子組件的【寬高】設置為父組件寬高的【百分比】
// 2. 通過 layoutWeight 屬性設置主軸方向【佈局權重】（比例）
// 容器 主軸橫向
Row() {
// 上一首
Column() {
Image($r("app.media.ic_public_play_last"))
.width(50)
.height(50)
.border({ width: 2 })
.borderRadius(30)
.padding(10)
}
.height(96)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
// .width('34%')
.layoutWeight(1)
// 播放&暫停
Column() {
Image($r("app.media.ic_public_pause"))
.width(50)
.height(50)
.border({ width: 2 })
.borderRadius(30)
.padding(10)
}
.height(96)
.backgroundColor(Color.Red)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
// .width('34%')
.layoutWeight(1)
// 下一首
Column() {
Image($r("app.media.ic_public_play_next"))
.width(50)
.height(50)
.border({ width: 2 })
.borderRadius(30)
.padding(10)
}
.height(96)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
// .width('34%')
.layoutWeight(1)
}
.width(this.rate) // 綁定寬度給 容器
.height(96)
.borderRadius(16)
.backgroundColor(Color.Pink)
// 調整寬度的滑塊
this.slider()
}
.width('100%')
.height('100%')
.backgroundColor('#F1F3F5')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
}
3.1.4. 縮放能力
編輯
縮放能力是指子組件的【寬高】按照預設的比例，隨容器組件發生變化，變化過程中子組件的【寬高比不變】。使用的屬性是 aspectRatio
|
屬性名 |
類型 |
必填 |
説明 |
|
aspectRatio |
number |
是 |
指定當前組件的寬高比，aspectRatio = width/height。
|
測試代碼：
@Entry
@Component
struct Demo04 {
@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)
.position({ x: '20%', y: '80%' })
.onChange((value)=>{
this.sliderHeight = value
})
Slider({
value: this.sliderWidth,
min: 100,
max: 400,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.width('60%')
.height(50)
.position({ x: '20%', y: '87%' })
.onChange((value)=>{
this.sliderWidth = value
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
Text('寬度:' + this.sliderWidth.toFixed(0) + ' 高度:' + this.sliderHeight.toFixed(0))
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
Column() {
// 動態修改該容器的寬高
Column() {
Column() {
Image($r("app.media.avatar"))
.width('100%')
.height('100%')
}
.border({ width: 2, color: Color.Red }) // 邊框，僅用於展示效果
// 佈局能力 4：縮放能力
// 子組件的寬高按照預設的比例，隨容器組件發生變化，且變化過程中子組件的【寬高比】不變。
// 實現方式：
// 給子組件設置 aspectRatio即可 設置的值是 寬度/高度
}
.backgroundColor(Color.Gray)
.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)
}
}
}
3.1.5. 延伸能力
編輯
延伸能力是指容器組件內的子組件，按照其在列表中的先後順序，隨容器組件尺寸變化【顯示或隱藏】，隱藏時可以通過滑動切換顯示。實現的方式是通過 List 組件或 Scroll 組件
測試代碼：
import { NavItem } from './Demo02'
@Entry
@Component
struct Demo05 {
@State rate: number = 100
// 數組
readonly appList: NavItem [] = [
{ id: 1, icon: $r('app.media.ic_nav_01'), title: '淘金幣' },
{ id: 2, icon: $r('app.media.ic_nav_02'), title: '搖現金' },
{ id: 3, icon: $r('app.media.ic_nav_03'), title: '閒魚' },
{ id: 4, icon: $r('app.media.ic_nav_04'), title: '中通快遞' },
{ id: 5, icon: $r('app.media.ic_nav_05'), title: '芭芭農場' },
{ id: 6, icon: $r('app.media.ic_nav_06'), title: '淘寶珍庫' },
{ id: 7, icon: $r('app.media.ic_nav_07'), title: '阿里拍賣' },
{ id: 8, icon: $r('app.media.ic_nav_08'), title: '阿里藥房' },
]
// 底部滑塊，可以通過拖拽滑塊改變容器尺寸
@Builder
slider() {
Slider({
value: this.rate,
min: 100,
max: 730,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.width('60%')
.height(50)
.position({ x: '20%', y: '80%' })
.onChange((value)=>{
this.rate = value
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
// 展示寬度
Text('寬度:' + this.rate.toFixed(0))
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
Column() {
Row({ space: 10 }) {
// 佈局能力 5：延伸能力
// 容器組件內的子組件，按照其在列表中的先後順序，隨容器組件尺寸變化【顯示或隱藏】
// 實現方式：
// 1.List 組件
// 2.Scroll 配合 Row 或者 Column
// 核心：調整父容器的尺寸，讓頁面中顯示的組件數量發生改變
// 通過List組件實現隱藏能力
List({ space: 10 }) {
ForEach(this.appList, (item: NavItem) => {
ListItem() {
Column() {
Image(item.icon)
.width(48)
.height(48)
.margin({ top: 8 })
Text(item.title)
.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)
// 通過Scroll 組件實現隱藏能力
// Scroll() {
// Row({ space: 10 }) {
// ForEach(this.appList, (item: NavItem, index: number) => {
// Column() {
// Image(item.icon)
// .width(48)
// .height(48)
// .margin({ top: 8 })
// Text(item.title)
// .width(64)
// .height(30)
// .lineHeight(15)
// .fontSize(12)
// .textAlign(TextAlign.Center)
// .margin({ top: 8 })
// .padding({ bottom: 15 })
// }
// .width(80)
// .height(102)
// })
// }
// }
// .scrollable(ScrollDirection.Horizontal) // 設置橫向滾動
// .padding({ top: 16, left: 10 })
// .height(118)
// .borderRadius(16)
// .backgroundColor(Color.White)
}
.width(this.rate)
this.slider()
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
}
3.1.6. 隱藏能力
隱藏能力指的是：按其【顯示優先級】，隨容器組件尺寸變化顯示或隱藏。通過displayPriority屬性來實現
|
屬性名 |
類型 |
必填 |
説明 |
|
displayPriority |
number |
是 |
設置當前組件在佈局容器中顯示的優先級，當父容器空間不足時，低優先級的組件會被隱藏。
|
測試代碼：
@Entry
@Component
struct Demo06 {
@State rate: number = 48
// 底部滑塊，可以通過拖拽滑塊改變容器尺寸
@Builder
slider() {
Slider({
value: this.rate,
min: 0,
max: 400,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.width('60%')
.height(50)
.position({ x: '20%', y: '80%' })
.onChange((value)=>{
this.rate = value
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
Text('寬度:' + this.rate.toFixed(0))
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
Column() {
// 佈局能力 6：隱藏能力
// 容器組件內的子組件，按照其預設的顯示優先級，隨容器組件尺寸變化顯示或隱藏
// 實現方式：
// displayPriority屬性：設置佈局優先級來控制顯隱
// 當主軸方向剩餘尺寸不足以滿足全部元素時，按照佈局優先級，從[小到大]依次隱藏
Row({ space: 10 }) {
Image($r("app.media.ic_public_favor"))
.width(48)
.height(48)
Image($r("app.media.ic_public_play_last"))
.width(48)
.height(48)
Image($r("app.media.ic_public_pause"))
.width(48)
.height(48)
Image($r("app.media.ic_public_play_next"))
.width(48)
.height(48)
.objectFit(ImageFit.Contain)
Image($r("app.media.ic_public_view_list"))
.width(48)
.height(48)
.objectFit(ImageFit.Contain)
}
.width(this.rate)
.height(96)
.borderRadius(16)
.backgroundColor(Color.Gray)
.justifyContent(FlexAlign.Center)
.padding(10)
this.slider()
}
.width('100%')
.height('100%')
.backgroundColor('#F1F3F5')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
}
@Entry
@Component
struct DisplayCase {
@State message: string = 'Hello World';
build() {
Row() {
Image($r("sys.media.waveform_folder_fill"))
.width(100)
.aspectRatio(1)
.displayPriority(1)
Image($r("sys.media.rectangle_filled_and_line_horizontal_and_rectangle"))
.width(100)
.aspectRatio(1)
.displayPriority(2)
Image($r("sys.media.ohos_user_auth_icon_face"))
.width(100)
.aspectRatio(1)
.displayPriority(3)
Image($r("sys.media.phone_arrow_down_left_circle_fill"))
.width(100)
.aspectRatio(1)
.displayPriority(2)
Image($r("sys.media.ohos_save_button_filled"))
.width(100)
.aspectRatio(1)
.displayPriority(1)
}
.justifyContent(FlexAlign.SpaceEvenly)
.height('100%')
.width('100%')
}
}
3.1.7. 折行能力
折行能力是指容器組件尺寸發生變化，當佈局方向尺寸不足以顯示完整內容時自動換行。折行能力通過使用 Flex折行佈局 （將wrap屬性設置為FlexWrap.Wrap）實現。
|
名稱 |
描述 |
|
NoWrap |
Flex容器的元素單行/列布局，子項不允許超出容器。 |
|
Wrap |
Flex容器的元素多行/列排布，子項允許超出容器。 |
|
WrapReverse |
Flex容器的元素反向多行/列排布，子項允許超出容器。 |
測試代碼：
import { NavItem } from './Demo02'
@Entry
@Component
struct Demo07 {
@State rate: number = 0.7
readonly imageList: NavItem [] = [
{ id: 1, icon: $r('app.media.ic_nav_01'), title: '淘金幣' },
{ id: 2, icon: $r('app.media.ic_nav_02'), title: '搖現金' },
{ id: 3, icon: $r('app.media.ic_nav_03'), title: '閒魚' },
{ id: 4, icon: $r('app.media.ic_nav_04'), title: '中通快遞' },
{ id: 5, icon: $r('app.media.ic_nav_05'), title: '芭芭農場' },
{ id: 6, icon: $r('app.media.ic_nav_06'), title: '淘寶珍庫' },
]
// 底部滑塊，可以通過拖拽滑塊改變容器尺寸
@Builder
slider() {
Slider({
value: this.rate * 100,
min: 10,
max: 100,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.width('60%')
.position({ x: '20%', y: '87%' })
.onChange((value: number) => {
this.rate = value / 100
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
Text('寬度:' + (this.rate * 100).toFixed(0) + '%')
.zIndex(2)
.translate({ x: 20, y: 20 })
.fontColor(Color.Orange)
Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column }) {
Column() {
// 佈局能力 7：折行能力
// 容器組件尺寸發生變化，當佈局方向尺寸不足以顯示完整內容時自動換行
// 實現方式：
// Flex組件將 wrp 設置為FlexWrap.Wrap即可
// 通過Flex組件warp參數實現自適應折行
Flex({
direction: FlexDirection.Row,
alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center,
}) {
ForEach(this.imageList, (item: NavItem) => {
Column() {
Image(item.icon)
.width(80)
.height(80)
Text(item.title)
}
.margin(10)
})
}
.backgroundColor(Color.Gray)
.padding(20)
.width(this.rate * 100 + '%')
.borderRadius(16)
}
.width('100%')
this.slider()
}
.width('100%')
.height('100%')
.backgroundColor('#F1F3F5')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
}
}
3.1.8. 小結
編輯
參考的話術：
什麼是一多開發?
- 鴻蒙開發體系中, 主打的是1(HarmonyOS)+8(手機/平板/...)+N(其它的智能設備)
- 一套代碼, 多端部署, 按需適配
一多開發要解決哪些問題?
- 界面級一多(界面的適配問題)
- 自適應佈局 (小範圍佈局)
- 拉伸/均分/佔比/縮放/延伸/隱藏/折行
- 響應式佈局 (大的界面改變)
- 斷點
- 媒體查詢
- 功能級一多(所有功能不可能在所有設備都使用
- canIUse
- 工程級一多(項目的組織和管理)
- 三層架構 + hsp
-----------------------------------
- 一多開發中，提供了 2 種能力實現頁面適配:
- 自適應佈局：
- 核心就是利用一些組件及屬性實現適配效果
- 比如 layoutWeight實現佔比，比如 aspectRatio可以實現縮放
- 隱藏可以用 displayPriority
- 一共有 7 個，一下子可能想不起來那麼多，核心就是一些屬性而已
- 只能解決小屏幕手機到大屏幕手機的適配
- 響應式佈局
- 不同終端設備的變化需要使用響應式佈局
HarmonyOS賦能資源豐富度建設（第四期）-吳東林
https://developer.huawei.com/consumer/cn/training/classDetail/9fdeeb1a35d64d2fabad3948ae7aab72?type=1?ha_source=hmosclass&ha_sourceId=89000248
