GridContainer:纵向排布栅格布局容器,仅在栅格布局场景中使用
GridContainer(options?: { columns?: number | ‘auto’, sizeType?: SizeType, gutter?: Length, margin?: Length})
columns:设置当前布局总列数。
sizeType:选用设备宽度类型(SizeType,默认Auto)
SizeType枚举类:
XS:最小宽度类型设备
SM:小宽度类型设备
MD:中等宽度类型设备
LG:大宽度类型设备
Auto:根据设备类型进行选择
gutter:栅格布局列间距
margin:栅格布局两侧间距
效果如图:
代码:
@Entry
@Component
struct GridContainerT {
@State sizeType: SizeType = SizeType.XS
build() {
Column({ space: 5 }) {
GridContainer({ columns: 7, sizeType: this.sizeType, gutter: 1 }) {
Row() {
Text('1')
.useSizeType({
xs: { span: 1, offset: 0 },
sm: { span: 3, offset: 0 },
md: { span: 5, offset: 0 },
lg: { span: 7, offset: 0 }
})
.height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
}
}.width('90%')
Text('Click Simulate to change the device width')
.fontSize(9)
.width('90%')
.fontColor(0xCCCCCC)
.textAlign(TextAlign.Center)
Row() {
Button('XS')
.onClick(() => {
this.sizeType = SizeType.XS
}).backgroundColor(0x317aff)
Button('SM')
.onClick(() => {
this.sizeType = SizeType.SM
}).backgroundColor(0x317aff)
Button('MD')
.onClick(() => {
this.sizeType = SizeType.MD
}).backgroundColor(0x317aff)
Button('LG')
.onClick(() => {
this.sizeType = SizeType.LG
}).backgroundColor(0x317aff)
}
}.width('100%').margin({ top: 5 })
}
}