HarmonyOS 鸿蒙Next中Grid columnsTemplate() 支持其他单位吗？

HarmonyOS 鸿蒙Next中Grid columnsTemplate() 支持其他单位吗？

Grid columnsTemplate() 支持其他单位吗？columnsTemplate(“69vp 1fr”)

第一行固定，第二行自动撑开。类似HTML的css grid布局。

cke_3003.png


更多关于HarmonyOS 鸿蒙Next中Grid columnsTemplate() 支持其他单位吗？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

尊敬的开发者，您好！

Grid当前不支持第一列固定，第二列自动撑开的布局。

请问您是在什么样的业务场景中使用该能力，交互流程是怎样的，在哪一个环节遇到了问题？方便提供一下其他开发平台的实现方案或者接口（优先官方文档的内容）吗？请您注意提供的内容不要包含您或第三方的非公开信息，如给您带来不便，敬请谅解。

更多关于HarmonyOS 鸿蒙Next中Grid columnsTemplate() 支持其他单位吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

这是css grid 文档。

鸿蒙的Grid 组件只能以倍数比例划分，使用起来很局限。

尊敬的开发者，您好！您的问题已受理，请您耐心等待，感谢您的理解与支持！

Grid只支持均分

在HarmonyOS鸿蒙Next中，Grid的columnsTemplate()目前支持"fr"（份数单位）和"px"（像素单位）。暂不支持百分比、rem等相对单位。开发者可以通过"1fr 2fr"这样的份数分配实现自适应布局，或使用固定像素值如"100px 200px"。两种单位可以混合使用，例如"1fr 200px"。

在HarmonyOS Next中，Grid的columnsTemplate()目前主要支持vp(虚拟像素)和fr(比例单位)这两种单位。从您的代码示例columnsTemplate("69vp 1fr")来看，这种用法是完全正确的，可以实现第一列固定宽度(69vp)、第二列自动撑开的效果。

对于其他CSS中常见的单位(如px、em、rem等)，当前版本的HarmonyOS Grid布局暂时不支持。vp是鸿蒙推荐使用的响应式单位，能根据屏幕密度自动适配，建议优先使用。

这种布局方式确实类似于CSS Grid的grid-template-columns属性，通过结合固定值和比例单位(fr)可以实现灵活的网格布局。如需更复杂的布局，还可以考虑结合rowsTemplate()和子组件的布局属性来实现。

回到顶部