HarmonyOS Tabs嵌套Grid问题？

Question

tabs 的tabcontent 使用grid容器，Grid的元素个数不固定，导致各个tabcontent内容高度不对定，遇到的问题是，tabcontent 总是成了元素对多的高度，导致元素少的也很高，求支援

Answer 1

由于TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定，tabs不能自适应高度。 Grid组件，rowsTemplate、columnsTemplate都不设置时layoutDirection、maxcount、minCount、cellLength才生效，maxCount内的值为多少，对应方向上最大显示行数就是多少，可以理解为maxCount有一个高度控制开关，只要设置了maxCount之后，Grid就能实现自适应高度效果，具体使用方式请参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid-0000001815927620\#ZH-CN\_TOPIC\_0000001815927620\_\_%E7%A4%BA%E4%BE%8B6

@Entry
@Component
struct Index {
  @State numbers: string[] = []

  aboutToAppear() {
    for (let i = 1; i <= 35; i++) {
      this.numbers.push(i + '')
    }
  }

  build() {
    Scroll() {
      Column({ space: 5 }) {
        Blank()
        Text('rowsTemplate、columnsTemplate都不设置layoutDirection、maxcount、minCount、cellLength才生效')
          .fontSize(15)
          .fontColor(0xCCCCCC)
          .width('90%')
        Grid() {
          ForEach(this.numbers, (day: string) => {
            GridItem() {
              Text(day).fontSize(16).backgroundColor(0xF9CF93)
            }.width(40).height(80).borderWidth(2).borderColor(Color.Red)
          }, (day: string) => day)
        }
        .columnsGap(10)
        .rowsGap(10)
        .backgroundColor(0xFAEEE0)
        .maxCount(6)
        .minCount(2)
        .cellLength(0)
        .layoutDirection(GridDirection.Row)
        .backgroundColor(Color.Blue)
      }.width('90%').margin({ top: 5, left: 5, right: 5 }).align(Alignment.Center)
    }
  }
}