HarmonyOS 鸿蒙Next Gird的高度是不是一定要写死,没办法自适应?
HarmonyOS 鸿蒙Next 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
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)=>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