HarmonyOS 鸿蒙Next Gird的高度是不是一定要写死，没办法自适应？

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Gird的高度是不是一定要写死，没办法自适应？

Gird的高度是不是一定要写死，没办法自适应？ 
Grid() {
ForEach(this.getServiceData(), (item: ItemData) => {
GridItem() {
this.ServiceItem(item)
}
})


}
.columnsTemplate(‘1fr 1fr 1fr 1fr’)
.rowsTemplate(‘1fr 1fr 1fr 1fr’)
.width(AppCommonConstants.PERCENT_100)
.backgroundColor($r(‘app.color.c_9DA3AC’))<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

结果出来好大一个


更多关于HarmonyOS 鸿蒙Next Gird的高度是不是一定要写死，没办法自适应？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

grid不会自适应子节点的高度，不设置高度就是和父组件一样高。

可以通过以下方案代替:

1.仅设置.columnsTemplate('1fr 1fr 1fr 1fr')，给Grid添加属性 .layoutDirection(GridDirection.Row)和.maxCount(4)（此方案可以使得grid适应高度，但是maxCount中设置的数值会失效）

2.可以动态计算GridItem高度：

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)=&gt;item.text)
}
.height(<span class="hljs-keyword">this</span>.getCategoryViewHeight())
<span class="hljs-comment">// .rowsTemplate(this.getCategoryRowTmpl())</span>
.backgroundColor(Color.Yellow)
.columnsTemplate(<span class="hljs-string">'1fr 1fr 1fr 1fr'</span>)
.columnsGap(<span class="hljs-number">10</span>)
.rowsGap(<span class="hljs-number">10</span>)
.margin({top:<span class="hljs-number">10</span>})
<span class="hljs-comment">// 设置完maxCount后才能自适应高度，但是maxCount设置的值无效</span>
<span class="hljs-comment">// .maxCount(1)</span>

}
.padding(10)
.width(‘100%’)
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next Gird的高度是不是一定要写死，没办法自适应？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以用list设置多列实现

在HarmonyOS鸿蒙系统中，Next Grid（假设指的是某种布局网格）的高度并不一定需要写死，它可以实现自适应布局。

鸿蒙系统的UI框架提供了丰富的布局组件和样式设置选项，允许开发者根据屏幕大小、方向以及内容动态调整布局。对于网格布局，可以使用相应的布局参数（如权重、百分比等）来定义每个网格单元的大小，从而使其能够自适应不同的屏幕尺寸和分辨率。

具体来说，可以通过设置布局文件中的相关属性（如ohos:weight、ohos:layout_width为match_parent或wrap_content结合ohos:layout_height的相应设置等），以及利用鸿蒙系统提供的布局监听器来检测屏幕尺寸变化并动态调整网格高度。

此外，鸿蒙系统还支持使用约束布局（ConstraintLayout）等高级布局方式，这些布局方式提供了更强的布局灵活性和自适应能力，可以进一步满足开发者对复杂UI布局的需求。

综上所述，HarmonyOS鸿蒙系统中的Next Grid高度并不是一定要写死的，完全可以通过合理的布局设计和属性设置来实现自适应效果。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部