Jetpack Compose：LazyVerticalStaggeredGrid中FilterChip布局异常求助

核心问题分析 #

你的代码存在三个关键错误，直接导致FilterChip显示异常：

1. 网格单元格尺寸设置不合理：StaggeredGridCells.Adaptive(minSize = 4.dp)的最小尺寸过小，网格会为每个单元格分配极小的初始宽度，迫使Chip变形。
2. 错误传递Modifier：将VerticalGrid的fillMaxSize Modifier直接传给每个Chip，导致Chip强制填满网格单元格空间，忽略自身内容尺寸约束。
3. 共享选中状态逻辑错误：在LazyVerticalStaggeredGrid作用域内声明var selected = false，所有Chip会共享同一个选中状态，且因Lazy组件的item复用机制，状态无法正确更新。

修正后的完整代码 #

@Composable
fun VerticalGrid(
    contentList: List<String>,
    modifier: Modifier = Modifier,
) {
    // 为每个item维护独立的选中状态
    val selectedStates = remember(contentList) {
        mutableStateMapOf<String, Boolean>().apply {
            contentList.forEach { put(it, false) }
        }
    }

    LazyVerticalStaggeredGrid(
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        // 设置适配FilterChip的合理最小单元格宽度
        columns = StaggeredGridCells.Adaptive(minSize = 80.dp),
        verticalItemSpacing = 8.dp,
        modifier = modifier.fillMaxSize()
    ) {
        items(contentList) { text ->
            val isSelected = selectedStates[text] ?: false
            Chip(
                text = text,
                selected = isSelected,
                onClick = { selectedStates[text] = !isSelected },
                // 使用默认Modifier让Chip自适应内容尺寸
                modifier = Modifier
            )
        }
    }
}

@Composable
fun Chip(
    text: String,
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    FilterChip(
        onClick = onClick,
        label = { Text(text = text) },
        selected = selected,
        modifier = modifier
    )
}

object Content {
    val contentList = mutableListOf<String>().apply {
        for (i in 10..50) {
            add("Label$i")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ChipPreview1() {
    StaggeredGridOfChipsTheme {
        Column(
            verticalArrangement = Arrangement.Top,
            modifier = Modifier.fillMaxSize()
        ) {
            Chip("Hello", true, {})
        }
    }
}

@Preview(showBackground = true)
@Composable
fun VerticalGridPreview1() {
    StaggeredGridOfChipsTheme {
        VerticalGrid(Content.contentList, Modifier.fillMaxSize())
    }
}

关键修改说明 #

• 调整网格最小单元格尺寸：将minSize从4.dp改为80.dp，匹配FilterChip的默认最小宽度，确保网格为Chip预留足够的内容展示空间。
• 移除错误的Modifier传递：不再将父布局的强制填充Modifier传给Chip，让Chip根据自身文本内容自适应宽高。
• 独立维护每个Item的选中状态：使用mutableStateMapOf存储每个Chip的选中状态，避免状态共享导致的逻辑混乱。

排查Jetpack Compose UI异常的实用技巧 #

• 利用Layout Inspector：重点查看组件的尺寸约束、父布局传入的约束条件，确认是否存在父布局强制子组件填充空间的情况。
• 逐步简化测试：先单独验证子组件（如你的ChipPreview1）的正常显示，再逐步嵌入父布局，定位异常出现的环节。
• 检查Modifier传递逻辑：避免将父布局的fillMaxSize、fillMaxWidth等Modifier错误传递给子组件，除非明确需要子组件填充父布局空间。
• 验证状态管理：在Lazy组件中，不要在item作用域外声明共享状态，确保每个item的状态独立且使用remember或mutableState系列API维护。

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