学习笔记(二十五):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'  排在了前面

 

posted @ 2024-11-05 20:37  听着music睡  阅读(25)  评论(0编辑  收藏  举报