栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局
, 问题 栅格容器组件
,仅可以和栅格子组件
(GridCol)在栅格布局场景
中使用。
1. GridRow属性合集
- columns,决定了row共分为几份
- gutter,决定了上下左右的边距,可以设置 Length | GutterOption
- direction,设置正反方向,一般默认
- breakpoints,关键属性见下面
// 启用xs、sm、md共3个断点
breakpoints: {value: ["320vp", "600vp"]}
// 启用xs、sm、md、lg共4个断点,断点范围值必须单调递增
breakpoints: {value: ["320vp", "600vp", "840vp"]}
// 启用xs、sm、md、lg、xl共5个断点,断点范围数量不可超过断点可取值数量-1
breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]}
2. GridCol只有一个属性option:GridColOptions
span、offset、order
- span,决定了子组件占用栅格容器的列数。span为0表示不参与布局计算,即不会被渲染。默认值1
- offset,栅格子组件相对于原本位置偏移的列数。默认值:0
- order,元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。默认值:0,当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。 当子组件部分设置order,部分不设置order时,未设置order的子组件依次排序靠前,设置了order的子组件按照数值从小到大排列。
3. onBreakpointChange妙用:该方法只能用在GridRow组件上,并根据相关设置自动监听屏幕尺寸变化
.onBreakpointChange((breakpoint) => {
this.currentBp = breakpoint
}
完整代码如下
GridRow({
columns: 6,
gutter: { x: 25, y: 50 },
breakpoints: { value: ["340vp", "600vp", "780vp"]},
}) {
ForEach(this.bgColors, (color: Color,index:number) => {
GridCol({ span: { xs: 1, sm: 6, md: 3, lg: 2 }, offset: 0, order: 0 }) {
Row(){
Text(index+'')
}.width("100%").height("20vp")
}.borderColor(color).borderWidth(2)
})
}.width("100%").height("100%")
.onBreakpointChange((breakpoint) => {
this.currentBp = breakpoint
})
1:sm屏幕,分6份,GridCol占6份,显示单列
2:md屏幕,分6份,GridCol占3份,显示2列
3:lg屏幕,分6份,GridCol占2份,显示3列