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