HarmonyOS Grid组件能否高度自适应？

Question

Grid的高度能否根据内部组件高度自适应，我尝试不设置height，发现Grid高度会占满整个屏幕

Answer 1

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

1、rowsTemplate、columnsTemplate同时设置。

2、rowsTemplate、columnsTemplate仅设置其中的一个。

3、rowsTemplate、columnsTemplate都不设置。

目前在1、2两种布局中，grid不会自适应子节点的高度，不设置高度就是和父组件一样高。

rowsTemplate、columnsTemplate都不设置时layoutDirection、maxcount、minCount、cellLength才生效，maxCount内的值为多少，对应方向上最大显示行数就是多少，可以理解为maxCount有一个高度控制开关，只要设置了maxCount之后，Grid就能实现自适应高度效果

@Entry
@Component
struct Example {
  array: string[] = ['政务大厅', '社保医保', '人才就业', '公积金业务', '不动产业务', '税收征管', '司法业务', '民政业务', '公安交通', '海关业务', '烟草业务', '海事业务', '信访服务', '消防救援', '自助服务', '其他', '供电服务']

  @Builder
  gridItemBuilder(content: string) {
    GridItem() {
      Column() {
        Image($r('app.media.startIcon'))
          .width('35')
          .height('35')
        Text(content)
          .fontSize(14)
      }
      .height('100%')
      .width('100%')
    }
    .height('100')
  }

  @Builder
  contentBuilder(title: string, array: string[]) {
    Column() {
      Row() {
        Text(title)
      }
      .width('100%')
      .height('14%')

      Grid() {
        ForEach(array, (item: string) => {
          this.gridItemBuilder(item)
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
    }
    .height("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
  }
  build() {
    Tabs({ barPosition: BarPosition.Start }) {
      TabContent() {
        this.contentBuilder('办事场所', this.array)
      }
      .tabBar('办事场所')

      TabContent() {
        this.contentBuilder('爱心驿站', this.array)
      }
      .tabBar('爱心驿站')

      TabContent() {
        this.contentBuilder('国家机关', this.array)
      }
      .tabBar('国家机关')

      TabContent() {
        this.contentBuilder('卫生服务', this.array)
      }
      .tabBar('卫生服务')

      TabContent() {
        this.contentBuilder('社区服务', this.array)
      }
      .tabBar('社区服务')

      TabContent() {
        this.contentBuilder('公共服务', this.array)
      }
      .tabBar('公共服务')

      TabContent() {
        this.contentBuilder('教育服务', this.array)
      }
      .tabBar('教育服务')
    }
    .width("100%")
    .height("80%")
    .vertical(true)
    .barWidth(100)
    .barMode(BarMode.Fixed)
    .barBackgroundColor(Color.Gray)
  }
}