栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的适配。
使用栅格布局的前提:
1.页面有等宽列数跟行数的元素。方便对页面元素进行定位和排版。
2.元素之间的间距调整,等距调整或x y轴不同的间距调整。
3.超出一行或一列,元素排列自动换行。
GridRow为栅格容器组件,需要与子组件GridCol配合使用
栅格系统断点
栅格系统以设备的水平宽度作为断点依据,分为xs、sm、md、lg四类设备宽度。
breakpoints.png
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
},
columns: 6 // 默认12列,可以自定义为6列
}) {
ForEach(this.bgColors, (color:Color, index?:number|undefined) => {
GridCol({
span: {
xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
}
}) {
Row() {
Text(`${index}`)
}.width("100%").height('50vp')
}.backgroundColor(color)
})
}
排列方向
通过设置GridRow的direction属性来指定子组件在栅格容器中的排列方向。GridRowDirection.Row从左往右排列,RowReverse从右往左排列
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
},
columns: 6,
direction: GridRowDirection.Row
})
子组件间距
通过设置GridRow的gutter属性来控制子元素间的间距。
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
},
columns: 6,
gutter: 10// 上下左右均间隔10
gutter:{x: 5, y: 10}// 上下10 左右间隔5
})
网友评论