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