HarmonyOS Grid高度根据内容自适应

grid 宽度设置后,如何设置可以让高度根据内容自适应。

HarmonyOS
2024-12-18 17:04:41
860浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
shlp

Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,有三种布局模式,请参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5

demo参考如下:

计算展示的行数rowCount,根据rowCount得出GridHeight、GridRowsTemplate

getCategoryRowCount() {
  return Math.ceil(this.categories.length / 2);
}

getCategoryRowTmpl() {
  const count = this.getCategoryRowCount();
  const arr: string[] = new Array(count || 1).fill('1fr');
  console.log('tag', arr.join(' '))
  return arr.join(' ');
}

getCategoryViewHeight() {
  return `${130 * this.getCategoryRowCount()}vp`;
}

Grid() {
}
.height(this.getCategoryViewHeight())
.columnsTemplate('1fr 1fr')
.rowsTemplate(this.getCategoryRowTmpl())
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
分享
微博
QQ
微信
回复
2024-12-18 19:00:17


相关问题
HarmonyOS List高度根据内容自适应
1026浏览 • 1回复 待解决
HarmonyOS Grid组件能否自适应内容高度?
670浏览 • 1回复 待解决
List水平布局如何根据内容自适应高度
1533浏览 • 1回复 待解决
HarmonyOS Grid组件能否高度自适应
769浏览 • 1回复 待解决
Grid组件如何实现高度自适应
4144浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
1309浏览 • 1回复 待解决
HarmonyOS web的高度自适应内容高度
1178浏览 • 1回复 待解决
HarmonyOS 高度自适应
1048浏览 • 1回复 待解决
HarmonyOS grid如何自适应宽度
854浏览 • 1回复 待解决
HarmonyOS RichText自适应高度
753浏览 • 1回复 待解决
HarmonyOS RichText能否自适应高度
648浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
1268浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
1601浏览 • 1回复 待解决
HarmonyOS webview高度不能自适应
664浏览 • 1回复 待解决
HarmonyOS RelativeContainer自适应高度相关
766浏览 • 1回复 待解决
HarmonyOS 高度自适应的问题
1041浏览 • 1回复 待解决