Grid组件高度不能被GridItem高度自动撑起,必须要设置height或maxCount属性

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

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

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

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

HarmonyOS
2024-10-30 11:43:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以动态计算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%')  
}
分享
微博
QQ
微信
回复
2024-10-30 17:41:15
相关问题
HarmonyOS Grid-GridItem组件高度的咨询
790浏览 • 1回复 待解决
嵌套ForEach不能自动适应高度
1263浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
1367浏览 • 1回复 待解决
Grid组件如何实现高度自适应
4447浏览 • 1回复 待解决
HarmonyOS Grid组件能否高度自适应
1061浏览 • 1回复 待解决
HarmonyOS Grid组件能否自适应内容高度?
902浏览 • 1回复 待解决
HarmonyOS 可移动GridItemGrid组件
1335浏览 • 1回复 待解决
HarmonyOS 设置list组件高度
777浏览 • 1回复 待解决
HarmonyOS Grid高度根据内容自适应
1072浏览 • 1回复 待解决