Jetpack Compose中如何在LazyVerticalGrid中跳过空标题项

直接在数据源层面过滤掉title为空的条目是最彻底的解决方案，既不会崩溃也不会留下空白项，具体步骤如下：

1. 过滤API返回的数据 #

在将数据传给LazyVerticalGrid之前，先过滤掉title为null、空字符串或者全空格的条目：

// 假设你的API数据类是这样的
data class ApiItem(val id: Int, val title: String?)

// 从接口获取原始数据
val originalItems: List<ApiItem> = fetchDataFromApi()

// 过滤掉不符合条件的项
val filteredItems = originalItems.filter { item ->
    // isNullOrBlank会同时处理null、空字符串、全空格的情况
    !item.title.isNullOrBlank()
}

2. 用过滤后的列表渲染LazyVerticalGrid #

把过滤后的列表传给items参数，这样LazyGrid只会渲染符合条件的项，不会有空白或崩溃：

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(filteredItems) { item ->
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
                .background(Color.LightGray),
            contentAlignment = Alignment.Center
        ) {
            // 因为已经过滤过，title肯定不为空，这里可以安全使用
            Text(text = item.title!!)
            // 或者更稳妥的写法：Text(text = item.title ?: "")
        }
    }
}

为什么之前的方法会出问题？ #

• 在item内加空值判断抛异常：LazyVerticalGrid是根据传入的列表长度来生成item索引和布局的，如果你在单个item里跳过渲染，会导致组件内部的索引和实际渲染的项不匹配，触发IllegalStateException。
• 在Box内判断文本显示：这种方式只是隐藏了文本，但item本身的布局位置还是会被保留，所以会留下空白。

内容的提问来源于stack exchange，提问作者XCarb