1# GridContainer 2 3纵向排布栅格布局容器，仅在栅格布局场景中使用。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14 15## 接口 16 17GridContainer(value?: { columns?: number | auto, sizeType?: SizeType, gutter?: string|number, margin?: string|number}) 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| -------- | ------------------------ | ---- | -------------------------------------------- | 23| columns | number \| auto | 否 | 设置当前布局总列数。<br/>默认值：auto | 24| sizeType | SizeType | 否 | 选用设备宽度类型。<br/>默认值：SizeType.Auto | 25| gutter | Length | 否 | 栅格布局列间距，不支持百分比。 | 26| margin | Length | 否 | 栅格布局两侧间距，不支持百分比。 | 27 28## SizeType枚举说明 29 30| 名称 | 描述 | 31| ---- | ----------- | 32| XS | 最小宽度类型设备。 | 33| SM | 小宽度类型设备。 | 34| MD | 中等宽度类型设备。 | 35| LG | 大宽度类型设备。 | 36| Auto | 根据设备类型进行选择。 | 37 38## 属性 39 40支持通用属性和Column组件的[属性方法](ts-container-column.md#属性)。 41 42 43## 事件 44 45支持通用事件。 46 47 48## 示例 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct GridContainerExample { 55 @State sizeType: SizeType = SizeType.XS 56 57 build() { 58 Column({ space: 5 }) { 59 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 60 Row() { 61 Text('1') 62 .useSizeType({ 63 xs: { span: 6, offset: 0 }, 64 sm: { span: 2, offset: 0 }, 65 md: { span: 2, offset: 0 }, 66 lg: { span: 2, offset: 0 } 67 }) 68 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 69 Text('2') 70 .useSizeType({ 71 xs: { span: 2, offset: 6 }, 72 sm: { span: 6, offset: 2 }, 73 md: { span: 2, offset: 2 }, 74 lg: { span: 2, offset: 2 } 75 }) 76 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 77 Text('3') 78 .useSizeType({ 79 xs: { span: 2, offset: 8 }, 80 sm: { span: 2, offset: 8 }, 81 md: { span: 6, offset: 4 }, 82 lg: { span: 2, offset: 4 } 83 }) 84 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 85 Text('4') 86 .useSizeType({ 87 xs: { span: 2, offset: 10 }, 88 sm: { span: 2, offset: 10 }, 89 md: { span: 2, offset: 10 }, 90 lg: { span: 6, offset: 6 } 91 }) 92 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 93 } 94 }.width('90%') 95 96 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 97 Row() { 98 Button('XS') 99 .onClick(() => { 100 this.sizeType = SizeType.XS 101 }).backgroundColor(0x317aff) 102 Button('SM') 103 .onClick(() => { 104 this.sizeType = SizeType.SM 105 }).backgroundColor(0x317aff) 106 Button('MD') 107 .onClick(() => { 108 this.sizeType = SizeType.MD 109 }).backgroundColor(0x317aff) 110 Button('LG') 111 .onClick(() => { 112 this.sizeType = SizeType.LG 113 }).backgroundColor(0x317aff) 114 } 115 }.width('100%').margin({ top: 5 }) 116 } 117} 118``` 119 120 121
