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