学习笔记（二十五）：ArkUi-栅格布局 (GridRow/GridCol)

概述：

栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：

1. 提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。

2. 统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。

3. 灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。

4. 自动换行和自适应：栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页面布局更加灵活和适应性强。

一、GridRow属性值

1、columns，布局总列数

columns设置栅格布局的总列数(columns默认值为12，即在未设置columns时，任何断点下，栅格布局被分成12列。)

GridRow({columns:4}) { // 设置列表为4列
...
}

 

 

2、direction，排列方向

设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。

该属性可以设置为GridRowDirection.Row（从左往右排列）或GridRowDirection.RowReverse（从右往左排列），以满足不同的布局需求 

GridRow({columns:4,direction:GridRowDirection.Row}) {
..
}

 

GridRow({columns:4,direction:GridRowDirection.RowReverse}){
..
}

 

 

3、gutter，子组件间距

gutter属性设置子元素在水平和垂直方向的间距

1、当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。

 GridRow({ gutter: 10 }){}

 

2、当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距

GridRow({ gutter: { x: 20, y: 50 } }){}

 

 

二、GridCol属性值

1、span，子组件占栅格布局的列数，决定了子组件的宽度，默认为1

如下示例，GridCol 内容为'Order'  的span设置了3，宽度占比为3

 

2、order，栅格子组件的序号

决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较小的组件在前，较大的在后。

当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。

如下示例，GridCol 内容为'Order'  排在了前面