11. 快速上手！HarmonyOS4.0 Grid/GridItem容器组件详解

Table of Contents

• 本章内容概要
• Grid组件说明
• GridItem 组件说明
• Grid属性讲解
• columnsTemplate
• 代码如下
• 效果图
• rowsTemplate
• 代码如下
• 效果图
• columnsGap/ rowsGap
• 三种布局模式

本章内容概要

Grid组件说明

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。包含GridItem子组件。

GridItem 组件说明

网格容器中单项内容容器。

Grid属性讲解

columnsTemplate

设置当前网格布局列的数量，不设置时默认1列。
例如， ‘1fr 1fr 2fr’ 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
注意：
设置为’0fr’时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。

代码如下

/**
 * @Author: 若城
 * @Description:
 */
@Entry
@Component
struct Grid_GridItem_Note {
  private gridItemData:string[]=['1','2','3','4']
  build() {
      Column({space:5}) {
         Grid(){
              ForEach(this.gridItemData, (item)=>{
                GridItem(){
                  Text(item).fontSize(20).backgroundColor('#e5e5e5')
                    .width('100%').height(50)
                }
                .borderWidth({
                  left:0,
                  right:2,
                  bottom:0,
                  top:0
                })
               })
         }.columnsTemplate('1fr 2fr 3fr 4fr')
      }
      .width('100%')
    }

}

�

效果图

rowsTemplate

设置当前网格布局行的数量，不设置时默认1行。
例如，'1fr 1fr 2fr’是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
注意：
设置为’0fr’，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。

代码如下

Grid(){
	ForEach(this.gridItemData, (item)=>{
		GridItem(){
			Text(item)
				.fontSize(20)
				.backgroundColor('#e4e4e4')
				.height('100%')
				.width(50)
		}.borderWidth({
		left:1,
		right:2,
		bottom:1,
		top:1
	})
					})
}.rowsTemplate('1fr 2fr 3fr 4fr')

�

效果图

columnsGap/ rowsGap

| rowsGap

columnsGap

三种布局模式

Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式：

1. rowsTemplate、columnsTemplate同时设置：
   • Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。
   • 此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
   • Grid的宽高没有设置时，默认适应父组件尺寸。
   • Gird网格列大小按照Gird自身内容区域大小减去所有行列Gap后按各个行列所占比重分配。
   • GridItem默认填满网格大小。
2. rowsTemplate、columnsTemplate仅设置其中的一个：
   • 元素按照设置的方向进行排布，超出Grid显示区域后，Grid可通过滚动的方式展示。
   • 如果设置了columnsTemplate，Gird滚动方向为垂直方向，主轴方向为垂直方向，交叉轴方向为水平方向。
   • 如果设置了rowsTemplate，Gird滚动方向为水平方向，主轴方向为水平方向，交叉轴方向为垂直方向。
   • 此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
   • 网格交叉轴方向尺寸根据Gird自身内容区域交叉轴尺寸减去交叉轴方向所有Gap后按所占比重分配。
   • 网格主轴方向尺寸取当前网格交叉轴方向所有GridItem高度最大值。
3. rowsTemplate、columnsTemplate都不设置：
   • 元素在layoutDirection方向上排布，列数由Grid的宽度、首个元素的宽度、minCount、maxCount、columnsGap共同决定。
   • 行数由Grid高度、首个元素高度、cellLength、rowsGap共同决定。超出行列容纳范围的元素不显示，也不能通过滚动进行展示。
   • 此模式下仅生效以下属性：layoutDirection、maxCount、minCount、cellLength、editMode、columnsGap、rowsGap。
   • 当前layoutDirection设置为Row时，先从左到右排列，排满一行再排一下一列。剩余高度不足时不再布局，整体内容顶部居中。
   • 当前layoutDirection设置为Column时，先从上到下排列，排满一列再排一下一列，剩余宽度度不足时不再。整体内容顶部居中。