一、自适应布局
1、拉伸能力
容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。
Row() {
// 通过flexGrow和flexShrink属性，将多余的空间全部分配给图片，将不足的控件全部分配给两侧的空白区域
Row().width(150)
.flexGrow(0).flexShrink(1)
Image($r("app.media.illustrator")).width(400)
.flexGrow(1).flexShrink(0)
Row.width(150)
.flexGrow(0).flexShrink(1)
}
2、均分能力
容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。
Column() {
Row() {
ForEach(this.list, (item,number) => {...})
.width('100%')
// 均分父容器主轴方向的剩余空间
.justifyContent(FlexAlign.SpaceEvenly)
// 同上Row
Row() { ... }
}
.width(this.rate * 100 + '%') 
3、占比能力
子组件的宽或高按照预设的比例，随容器组件发生变化。
Row() {
Column() { ... }
.layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重
Column() { ... }
.layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重
Column() { ... }
.layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重
}
.width(this.rate * 100 + '%')
4、缩放能力
子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。
Column() {
Column() {
Image($r("app.media.illustrator"))
.width('100%').height('100%')
}
.aspectRatio(1) // 固定宽高比
}
.height(this.sliderHeight)
.width(this.sliderWidth)
5、延伸能力
容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。
Row({ space: 10 })
// 通过list组件实现隐藏能力
List({ space: 10 }) {...}
.listDirection(Axis.Horizontal)
.width('100%')
}
.width(this.rate * 100 +'%')
6、隐藏能力
容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏。
Row() {
Image($r("app.media.favorite"))
.displayPriority(1) // 布局优先级
Image($r("app.media.down"))
.displayPriority(2) // 布局优先级
Image($r("app.media.pause"))
.displayPriority(3) // 布局优先级
Image($r("app.media.next"))
.displayPriority(2) // 布局优先级
Image($r("app.media.list"))
.displayPriority(1) // 布局优先级
}
.width(this.rate * 100 + '%')
7、折行能力
容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容，自动换行。
Column() {
// 通过flex组件wrap参数实现自适应折行
Flex({
wrap: FlexWrap.Wrap,
direction: FlexDirection.Row
}) {
Foreach(this.list, (item: Resource) => {
Image(item).width(183).height(138)
})
}
.width(this.rate * 100 + '%')
}
二、响应式布局
1、断点
断点常用范围：
| 断点名称 | 取值范围(vp) |
| xs | [0, 320) |
| sm | [320, 600) |
| md | [600, 840) |
| lg | [840, +∞) |
2、栅格布局
栅格组件将其所在的区域划分为有规律的多列，通过调整不同断点下的栅格组件的参数以及其子组件占据的列数等，实现不同的布局效果。
GridRow({
columns:{ sm: 2, md: 8, lg: 12 },
gutter: { x: '12vp' }
}) {
GridCol({
span: { sm: 4, md: 6, lg: 8 },
offset: { sm: 8, ms: 1, lg: 2 }
}) {
Column() { ... }
}
}（1）缩进布局
GridRow({
columns:{ sm: 4, md: 8, lg: 12 },
gutter: 24
}) {
GridCol({
span: { sm: 4, md: 6, lg: 8 },
offset: { ms: 1, lg: 2 }
}) {
Column() { ... }.width('100%')
}
} 
（2）挪移布局
GridRow({
columns:{ sm: 4, md: 8, lg: 12 }
}) {
GridCol({
span: { sm: 4, md: 4, lg: 6 }
}) { ... }
GridCol({
span: { sm: 4, md: 4, lg: 6 }
}) { ... }
}.onBreakpointChange((breakpoint: string) => {
this.currentBreakPoint = breakpoint
}) 
（3）重复布局
GridRow({
columns:{ sm: 4, md: 8, lg: 12 },
gutter: 24
}) {
ForEach(this.list, () => {
GridCol({
span: { sm: 4, md: 4, lg: 6 }
}) { ... }
})
} 
