LazyColumn嵌套LazyHorizontalGrid报错崩溃的解决方法
异常原因
LazyHorizontalGrid作为横向滚动的懒加载容器,要求垂直方向必须接收到明确的高度约束,否则无法完成内部item的布局测量。将其直接作为LazyColumn的子item时,LazyColumn垂直方向属于无界滚动场景,不会给子项传递固定高度约束,直接触发组件内置的参数校验,抛出IllegalArgumentException: LazyHorizontalGrid's height should be bound by parent异常。
另外你代码中设置的rows = GridCells.Fixed(3)代表垂直方向固定排3行、内容横向滚动,和你需要的双行横向排布需求不匹配,需要同步调整参数。
修复方案:给LazyHorizontalGrid添加明确高度约束
直接给LazyHorizontalGrid添加height修饰符指定固定高度即可,高度值可以根据你的item设计高度+行间距计算:比如单条item高度为48dp,双行排布加1个16dp的垂直间距,总高度设置为112dp即可。
修复后的代码如下:
@Composable fun HomeItem1() { Surface(modifier = Modifier.nestedScroll(rememberViewInteropNestedScrollConnection())) { LazyColumn { // 其他LazyColumn内容 item { LazyHorizontalGrid( modifier = Modifier.height(112.dp), // 新增固定高度约束,解决崩溃 rows = GridCells.Fixed(2), // 调整为垂直方向2行,匹配双行横向排布需求 horizontalArrangement = Arrangement.spacedBy(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp) ) { items(arrayList.size) { Text(arrayList[it]) } } } } } }
注意:不要给懒加载网格设置
wrapContentHeight()修饰符,会导致懒加载机制失效,一次性加载所有item引发性能问题,还可能出现测量布局错乱。
非懒加载替代方案
如果横向区域的条目总数不多(一般20条以内,不会出现性能压力),不需要懒加载能力,可以直接用普通滚动容器实现,不需要手动计算高度:
@Composable fun HomeItem1() { Surface(modifier = Modifier.nestedScroll(rememberViewInteropNestedScrollConnection())) { LazyColumn { // 其他LazyColumn内容 item { Row( modifier = Modifier.horizontalScroll(rememberScrollState()), horizontalArrangement = Arrangement.spacedBy(16.dp) ) { // 第一列 Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { for (i in arrayList.indices step 2) { Text(arrayList[i]) } } // 第二列 Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { for (i in 1 until arrayList.size step 2) { Text(arrayList[i]) } } } } } } }
内容的提问来源于stack exchange,提问作者Mayur
相关产品推荐
相关产品推荐

