【HarmonyOS NEXT】Grid在不设置height属性时，如何实现根据GridItem内容高度自动撑起

 【关键字】

Grid组件 / GridItem / 高度 / 自动撑起 / height / maxCount

【问题描述】

页面中使用Grid组件，因为GridItem数量不固定，且不允许滚动，理想中Grid组件高度会被GridItem内容自动撑起。

实际体验中发现：

1. Grid必须显式设置固定height属性，这种由于GridItem数量不固定，且不允许出现滚动，不满足需求。

2. 设置maxCount属性后，可以实现高度被撑起，但与文档的解释好像不符，且GridItem数量不固定，所以也不满足需求。

3. Grid的height设置设置为auto时也不会被自动撑起。

Grid在不设置height属性时，如何实现根据GridItem内容高度自动撑起？

【解决方案】

grid不会自适应子节点的高度，不设置高度就是和父组件一样高。

参考Grid文档描述如下：

rowsTemplate、columnsTemplate仅设置其中的一个：

元素按照设置的方向进行排布，超出Grid显示区域后，Grid可通过滚动的方式展示。

如果设置了columnsTemplate，Grid滚动方向为垂直方向，主轴方向为垂直方向，交叉轴方向为水平方向。

如果设置了rowsTemplate，Grid滚动方向为水平方向，主轴方向为水平方向，交叉轴方向为垂直方向。

此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。

网格交叉轴方向尺寸根据Grid自身内容区域交叉轴尺寸减去交叉轴方向所有Gap后按所占比重分配。

网格主轴方向尺寸取当前网格交叉轴方向所有GridItem高度最大值。

目前有两个替代方案：

1. 使用list+lanes，如论坛里最后给出的方案（https://developer.huawei.com/consumer/cn/forum/topic/0203142166821666372?fid=0102683795438680754）。

2. 可以动态计算GridItem高度，然后给Grid的heigth设置高度。

   demo如下：

   getCategoryRowCount() {
   return Math.ceil(this.data.length / 4);
   }
   getCategoryViewHeight() {
   return `${68.33 * this.getCategoryRowCount()}vp`;
   }
   
   build() {
   Column() {
   Text(this.message)
   .fontSize(50)
   .fontWeight(FontWeight.Bold)
   Grid() {
   ForEach(this.data,(item:Item)=>{
   GridItem() {
   Column() {
   Image(item.img)
   .width(40)
   .height(40)
   Text(item.text)
   .margin({top:2})
   .fontSize(14)
   .textAlign(TextAlign.Center)
   }
   
   }
   },(item:Item)=>item.text)
   }
   .height(this.getCategoryViewHeight())
   // .rowsTemplate(this.getCategoryRowTmpl())
   .backgroundColor(Color.Yellow)
   .columnsTemplate('1fr 1fr 1fr 1fr')
   .columnsGap(10)
   .rowsGap(10)
   .margin({top:10})
   // 设置完maxCount后才能自适应高度，但是maxCount设置的值无效
   // .maxCount(1)
   }
   .padding(10)
   .width('100%')
   }