问题现象

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

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

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

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

可能原因

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

解决措施

目前有两个替代方案：

1.使用list替代，设置其lanes属性进行分列。

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

参考代码如下：

interface Item {
  text: string
  img: Resource
}


@Entry
@Component
struct Index {
  data: Item[] = [
    { text: 'aaa', img: $r('app.media.app_icon') },
    { text: 'bbb', img: $r('app.media.app_icon') },
    { text: 'ccc', img: $r('app.media.app_icon') },
    { text: 'ddd', img: $r('app.media.app_icon') },
    { text: 'eee', img: $r('app.media.app_icon') },
    { text: 'fff', img: $r('app.media.app_icon') },
    { text: 'ggg', img: $r('app.media.app_icon') },
    { text: 'hhh', img: $r('app.media.app_icon') },
    { text: 'jjj', img: $r('app.media.app_icon') },
    { text: 'kkk', img: $r('app.media.app_icon') }]
  // Calculate the number of rows in the grid
  getCategoryRowCount() {
    return Math.ceil(this.data.length / 4);
  }
  // Calculate the height of the grid based on the height of the item
  getCategoryViewHeight() {
    return `${68.33 * this.getCategoryRowCount()}vp`;
  }


  build() {
    Column() {
      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())
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .margin({ top: 10 })
    }
    .padding(10)
    .width('100%')
  }
}

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
• 《鸿蒙生态应用开发V2.0白皮书》
• 《鸿蒙 (OpenHarmony)开发基础到实战手册》
• OpenHarmony北向、南向开发环境搭建
• 《鸿蒙开发基础》
• 《鸿蒙开发进阶》
• 《鸿蒙开发实战》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿