HarmonyOS 鸿蒙Next Grid自适应高度出错

发布于 1周前 作者 bupafengyu 最后一次编辑是 5天前 来自 鸿蒙OS

Grid自适应高度出错,使用场景是List嵌套Swiper,Swiper里面嵌套Grid,如果设置了 .rowsTemplate(‘1fr 1fr’) .columnsTemplate(‘1fr 1fr 1fr 1fr 1fr’),那么高度是整个屏幕的高度,如果只设置columnsTemplate(‘1fr 1fr 1fr 1fr 1fr’),高度是0,所以显示2行5列没有办法字适应高度么?必须要显示的设置高度是多少VP或者百分之多少么?

List({ scroller: this.listScroller }) {
ListItem() {
LogosItem({ logoList: this.logoList }); //logo墙
}
......

} .width('100%')
.height('100%')


@Component
export struct LogosItem {
@Prop logoList: ObservedArray<ObservedArray<LogoData>>;

build() {

Swiper() {
ForEach(this.logoList, (items: LogoData[]) => {
Grid() {
ForEach(items, (logo: LogoData) => {
GridItem() {
Column() {
Image($r('app.color.text_red1'))
.width('32vp')
.height('32vp')
.backgroundColor($r('app.color.text_red1'))

Text(logo.name)
.fontSize('12fp')
.width('100%')
.textAlign(TextAlign.Center)
}
}
})
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.width('100%')
})
}
.width('100%')
.displayCount(1)
.displayMode(SwiperDisplayMode.AUTO_LINEAR)
.indicator(Indicator.dot().color($r('app.color.text_red1')).selectedColor($r('app.color.text_green1')))
.autoPlay(false)
.loop(false)
}
}

更多关于HarmonyOS 鸿蒙Next Grid自适应高度出错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
看看是不是自己设置高度了,这样的话自适应高度就会失效

更多关于HarmonyOS 鸿蒙Next Grid自适应高度出错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,Next Grid自适应高度出错的问题通常与布局配置和控件属性设置有关。以下是一些直接针对此问题的可能解决方案:

  1. 检查Grid布局设置:确保Grid容器的layout_height属性设置为wrap_content,以便其高度能够根据子元素自动调整。

  2. 子元素高度:检查Grid中的子元素(如Item)是否有固定高度设置。如果有,尝试移除这些固定高度,或调整为相对高度(如wrap_content或百分比高度)。

  3. 权重分配:如果Grid使用了权重分配(layout_weight),确保权重的设置不会导致高度计算异常。

  4. 动态数据加载:如果Grid中的数据是动态加载的,确保在数据更新后,Grid能够正确重新计算并调整其高度。可能需要调用相关方法刷新布局。

  5. 检查父容器:Grid的父容器也可能影响Grid的高度计算。确保父容器的布局和高度设置不会限制Grid的高度调整。

  6. 版本兼容性:检查当前使用的HarmonyOS版本是否包含与Grid布局相关的已知问题或限制。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部