HarmonyOS Grid组件能否高度自适应

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

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

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)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
Grid组件如何实现高度自适应
3282浏览 • 1回复 待解决
HarmonyOS Grid高度根据内容自适应
93浏览 • 1回复 待解决
HarmonyOS RichText能否自适应高度
29浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
558浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
1039浏览 • 1回复 待解决
HarmonyOS 自适应组件高度问题
1136浏览 • 1回复 待解决
HarmonyOS web组件怎么自适应高度
31浏览 • 1回复 待解决
HarmonyOS 高度自适应
267浏览 • 1回复 待解决
HarmonyOS RichText自适应高度
18浏览 • 1回复 待解决
HarmonyOS grid如何自适应宽度
4浏览 • 1回复 待解决
Web组件如何实现高度自适应
1074浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
405浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
790浏览 • 1回复 待解决
HarmonyOS web的高度自适应内容的高度
97浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
422浏览 • 1回复 待解决