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
相关问题
嵌套ForEach不能自动适应高度
624浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
295浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3120浏览 • 1回复 待解决
HarmonyOS 可移动GridItemGrid组件
189浏览 • 1回复 待解决
怎样为TextArea组件设置最小高度
372浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
359浏览 • 1回复 待解决
HarmonyOS Grid高度无法等分(横3竖2)
259浏览 • 1回复 待解决
如何设置组件的最大最小宽度高度
3123浏览 • 1回复 待解决
组件最大和最小宽度和高度如何设置
2406浏览 • 1回复 待解决
HarmonyOS Swiper里面的item高度自动刷新
357浏览 • 1回复 待解决