一次开发，多端部署--实例介绍

一、自适应布局

        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)// 同上RowRow() { ... }  
}
.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 }}) { ... }})
}