1# 栅格布局 (GridRow/GridCol) 2 3 4## 概述 5 6栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括： 7 81. 提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。 9 102. 统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。 11 123. 灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。 13 144. 自动换行和自适应：栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页面布局更加灵活和适应性强。 15 16[GridRow](../reference/apis-arkui/arkui-ts/ts-container-gridrow.md)为栅格容器组件，需与栅格子组件[GridCol](../reference/apis-arkui/arkui-ts/ts-container-gridcol.md)在栅格布局场景中联合使用。 17 18 19## 栅格容器GridRow 20 21 22### 栅格系统断点 23 24栅格系统以设备的水平宽度（[屏幕密度像素值](../reference/apis-arkui/arkui-ts/ts-pixel-units.md)，单位vp）作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。 25 26栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下： 27 28| 断点名称 | 取值范围（vp） | 设备描述 | 29| ---- | --------------- | --------- | 30| xs | [0, 320） | 最小宽度类型设备。 | 31| sm | [320, 520) | 小宽度类型设备。 | 32| md | [520, 840) | 中等宽度类型设备。 | 33| lg | [840, +∞) | 大宽度类型设备。 | 34 35在GridRow栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。 36 37| 断点名称 | 设备描述 | 38| ---- | --------- | 39| xs | 最小宽度类型设备。 | 40| sm | 小宽度类型设备。 | 41| md | 中等宽度类型设备。 | 42| lg | 大宽度类型设备。 | 43| xl | 特大宽度类型设备。 | 44| xxl | 超大宽度类型设备。 | 45 46- 针对断点位置，开发者根据实际使用场景，通过一个单调递增数组设置。由于breakpoints最多支持六个断点，单调递增数组长度最大为5。 47 48 49 ```ts 50 breakpoints: {value: ['100vp', '200vp']} 51 ``` 52 53 表示启用xs、sm、md共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md。 54 55 56 ```ts 57 breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']} 58 ``` 59 60 表示启用xs、sm、md、lg、xl共5个断点，小于320vp为xs，320vp-520vp为sm，520vp-840vp为md，840vp-1080vp为lg，大于1080vp为xl。 61 62- 栅格系统通过监听窗口或容器的尺寸变化进行断点，通过reference设置断点切换参考物。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。 63 64例如，使用栅格的默认列数12列，通过断点设置将应用宽度分成六个区间，在各区间中，每个栅格子元素占用的列数均不同。 65 66 67```ts 68@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; 69... 70GridRow({ 71 breakpoints: { 72 value: ['200vp', '300vp', '400vp', '500vp', '600vp'], 73 reference: BreakpointsReference.WindowSize 74 } 75}) { 76 ForEach(this.bgColors, (color:Color, index?:number|undefined) => { 77 GridCol({ 78 span: { 79 xs: 2, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。 80 sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。 81 md: 4, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。 82 lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。 83 xl: 8, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。 84 xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。 85 } 86 }) { 87 Row() { 88 Text(`${index}`) 89 }.width("100%").height('50vp') 90 }.backgroundColor(color) 91 }) 92} 93``` 94 95 96 97 98### 布局的总列数 99 100GridRow中通过columns设置栅格布局的总列数。 101 102- columns默认值为12，即在未设置columns时，任何断点下，栅格布局被分成12列。 103 104 105 ```ts 106 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown,Color.Red, Color.Orange, Color.Yellow, Color.Green]; 107 ... 108 GridRow() { 109 ForEach(this.bgColors, (item:Color, index?:number|undefined) => { 110 GridCol() { 111 Row() { 112 Text(`${index}`) 113 }.width('100%').height('50') 114 }.backgroundColor(item) 115 }) 116 } 117 ``` 118 119  120 121- 当columns为自定义值，栅格布局在任何尺寸设备下都被分为columns列。下面分别设置栅格布局列数为4和8，子元素默认占一列，效果如下： 122 123 ```ts 124 class CurrTmp{ 125 currentBp: string = 'unknown'; 126 set(val:string){ 127 this.currentBp = val 128 } 129 } 130 let BorderWH:Record<string,Color|number> = { 'color': Color.Blue, 'width': 2 } 131 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; 132 @State currentBp: string = 'unknown'; 133 ... 134 Row() { 135 GridRow({ columns: 4 }) { 136 ForEach(this.bgColors, (item:Color, index?:number|undefined) => { 137 GridCol() { 138 Row() { 139 Text(`${index}`) 140 }.width('100%').height('50') 141 }.backgroundColor(item) 142 }) 143 } 144 .width('100%').height('100%') 145 .onBreakpointChange((breakpoint:string) => { 146 let CurrSet:CurrTmp = new CurrTmp() 147 CurrSet.set(breakpoint) 148 }) 149 } 150 .height(160) 151 .border(BorderWH) 152 .width('90%') 153 154 Row() { 155 GridRow({ columns: 8 }) { 156 ForEach(this.bgColors, (item:Color, index?:number|undefined) => { 157 GridCol() { 158 Row() { 159 Text(`${index}`) 160 }.width('100%').height('50') 161 }.backgroundColor(item) 162 }) 163 } 164 .width('100%').height('100%') 165 .onBreakpointChange((breakpoint:string) => { 166 let CurrSet:CurrTmp = new CurrTmp() 167 CurrSet.set(breakpoint) 168 }) 169 } 170 .height(160) 171 .border(BorderWH) 172 .width('90%') 173 ``` 174 175  176 177- 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。 178 179 ```ts 180 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown] 181 GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) { 182 ForEach(this.bgColors, (item:Color, index?:number|undefined) => { 183 GridCol() { 184 Row() { 185 Text(`${index}`) 186 }.width('100%').height('50') 187 }.backgroundColor(item) 188 }) 189 } 190 ``` 191 192  193 194若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:4, md:8，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:8, xl:8, xxl:8 195 196 197### 排列方向 198 199栅格布局中，可以通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。该属性可以设置为GridRowDirection.Row（从左往右排列）或GridRowDirection.RowReverse（从右往左排列），以满足不同的布局需求。通过合理的direction属性设置，可以使得页面布局更加灵活和符合设计要求。 200 201- 子组件默认从左往右排列。 202 203 204 ```ts 205 GridRow({ direction: GridRowDirection.Row }){} 206 ``` 207 208  209 210- 子组件从右往左排列。 211 212 213 ```ts 214 GridRow({ direction: GridRowDirection.RowReverse }){} 215 ``` 216 217  218 219 220### 子组件间距 221 222GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。 223 224- 当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。 225 226 227 ```ts 228 GridRow({ gutter: 10 }){} 229 ``` 230 231  232 233- 当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。 234 235 236 ```ts 237 GridRow({ gutter: { x: 20, y: 50 } }){} 238 ``` 239 240  241 242 243## 子组件GridCol 244 245GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span（占用列数），offset（偏移列数），order（元素序号）的值。 246 247- 设置span。 248 249 250 ```ts 251 let Gspan:Record<string,number> = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4 } 252 GridCol({ span: 2 }){} 253 GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){} 254 GridCol(){}.span(2) 255 GridCol(){}.span(Gspan) 256 ``` 257 258- 设置offset。 259 260 261 ```ts 262 let Goffset:Record<string,number> = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4 } 263 GridCol({ offset: 2 }){} 264 GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){} 265 GridCol(){}.offset(Goffset) 266 ``` 267 268- 设置order。 269 270 271 ```ts 272 let Gorder:Record<string,number> = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4 } 273 GridCol({ order: 2 }){} 274 GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){} 275 GridCol(){}.order(2) 276 GridCol(){}.order(Gorder) 277 ``` 278 279 280### span 281 282子组件占栅格布局的列数，决定了子组件的宽度，默认为1。 283 284- 当类型为number时，子组件在所有尺寸设备下占用的列数相同。 285 286 287 ```ts 288 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; 289 ... 290 GridRow({ columns: 8 }) { 291 ForEach(this.bgColors, (color:Color, index?:number|undefined) => { 292 GridCol({ span: 2 }) { 293 Row() { 294 Text(`${index}`) 295 }.width('100%').height('50vp') 296 } 297 .backgroundColor(color) 298 }) 299 } 300 ``` 301 302  303 304- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置，各个尺寸下数值可不同。 305 306 307 ```ts 308 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; 309 ... 310 GridRow({ columns: 8 }) { 311 ForEach(this.bgColors, (color:Color, index?:number|undefined) => { 312 GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { 313 Row() { 314 Text(`${index}`) 315 }.width('100%').height('50vp') 316 } 317 .backgroundColor(color) 318 }) 319 } 320 ``` 321 322  323 324 325### offset 326 327栅格子组件相对于前一个子组件的偏移列数，默认为0。 328 329- 当类型为number时，子组件偏移相同列数。 330 331 332 ```ts 333 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; 334 ... 335 GridRow() { 336 ForEach(this.bgColors, (color:Color, index?:number|undefined) => { 337 GridCol({ offset: 2 }) { 338 Row() { 339 Text('' + index) 340 }.width('100%').height('50vp') 341 } 342 .backgroundColor(color) 343 }) 344 } 345 ``` 346 347  348 349 栅格默认分成12列，每一个子组件默认占1列，偏移2列，每个子组件及间距共占3列，一行放四个子组件。 350 351- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。 352 353 354 ```ts 355 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; 356 ... 357 358 GridRow() { 359 ForEach(this.bgColors, (color:Color, index?:number|undefined) => { 360 GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) { 361 Row() { 362 Text('' + index) 363 }.width('100%').height('50vp') 364 } 365 .backgroundColor(color) 366 }) 367 } 368 ``` 369 370  371 372 373### order 374 375栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较小的组件在前，较大的在后。 376 377当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。 378 379- 当类型为number时，子组件在任何尺寸下排序次序一致。 380 381 382 ```ts 383 GridRow() { 384 GridCol({ order: 4 }) { 385 Row() { 386 Text('1') 387 }.width('100%').height('50vp') 388 }.backgroundColor(Color.Red) 389 GridCol({ order: 3 }) { 390 Row() { 391 Text('2') 392 }.width('100%').height('50vp') 393 }.backgroundColor(Color.Orange) 394 GridCol({ order: 2 }) { 395 Row() { 396 Text('3') 397 }.width('100%').height('50vp') 398 }.backgroundColor(Color.Yellow) 399 GridCol({ order: 1 }) { 400 Row() { 401 Text('4') 402 }.width('100%').height('50vp') 403 }.backgroundColor(Color.Green) 404 } 405 ``` 406 407  408 409- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件排序次序设置。在xs设备中，子组件排列顺序为1234；sm为2341，md为3412，lg为2431。 410 411 412 ```ts 413 GridRow() { 414 GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) { 415 Row() { 416 Text('1') 417 }.width('100%').height('50vp') 418 }.backgroundColor(Color.Red) 419 GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) { 420 Row() { 421 Text('2') 422 }.width('100%').height('50vp') 423 }.backgroundColor(Color.Orange) 424 GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) { 425 Row() { 426 Text('3') 427 }.width('100%').height('50vp') 428 }.backgroundColor(Color.Yellow) 429 GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) { 430 Row() { 431 Text('4') 432 }.width('100%').height('50vp') 433 }.backgroundColor(Color.Green) 434 } 435 ``` 436 437  438 439 440## 栅格组件的嵌套使用 441 442栅格组件也可以嵌套使用，完成一些复杂的布局。 443 444以下示例中，栅格把整个空间分为12份。第一层GridRow嵌套GridCol，分为中间大区域以及“footer”区域。第二层GridRow嵌套GridCol，分为“left”和“right”区域。子组件空间按照上一层父组件的空间划分，粉色的区域是屏幕空间的12列，绿色和蓝色的区域是父组件GridCol的12列，依次进行空间的划分。 445 446 447 448```ts 449@Entry 450@Component 451struct GridRowExample { 452 build() { 453 GridRow() { 454 GridCol({ span: { sm: 12 } }) { 455 GridRow() { 456 GridCol({ span: { sm: 2 } }) { 457 Row() { 458 Text('left').fontSize(24) 459 } 460 .justifyContent(FlexAlign.Center) 461 .height('90%') 462 }.backgroundColor('#ff41dbaa') 463 464 GridCol({ span: { sm: 10 } }) { 465 Row() { 466 Text('right').fontSize(24) 467 } 468 .justifyContent(FlexAlign.Center) 469 .height('90%') 470 }.backgroundColor('#ff4168db') 471 } 472 .backgroundColor('#19000000') 473 .height('100%') 474 } 475 476 GridCol({ span: { sm: 12 } }) { 477 Row() { 478 Text('footer').width('100%').textAlign(TextAlign.Center) 479 }.width('100%').height('10%').backgroundColor(Color.Pink) 480 } 481 }.width('100%').height(300) 482 } 483} 484``` 485 486 487 488 489 490综上所述，栅格组件提供了丰富的自定义能力，功能异常灵活和强大。只需要明确栅格在不同断点下的Columns、Margin、Gutter及span等参数，即可确定最终布局，无需关心具体的设备类型及设备状态（如横竖屏）等。 491
