Compose中是否有非Android风格的Spoiler组件？能否通过LazyVerticalGrid实现？

官方组件情况 #

Compose 官方并没有提供跨平台风格的通用 Spoiler 组件，但你可以通过简单的自定义组合快速实现需求，完全能做到风格中立，不偏向 Android 平台。

自定义实现方案 #

核心逻辑是用 remember 维护展开状态，点击头部区域切换状态，内容区域配合动画完成显示/隐藏过渡。这种实现灵活可控，能适配任意设计风格。

基础实现代码 #

@Composable
fun CollapsibleContainer(
    header: @Composable () -> Unit,
    content: @Composable () -> Unit,
    modifier: Modifier = Modifier
) {
    val isExpanded = remember { mutableStateOf(false) }
    
    Column(modifier = modifier.clickable { isExpanded.value = !isExpanded.value }) {
        // 头部区域（可自定义任意风格）
        header()
        
        // 内容区域，带过渡动画
        AnimatedVisibility(
            visible = isExpanded.value,
            enter = expandVertically(),
            exit = shrinkVertically()
        ) {
            content()
        }
    }
}

使用示例（含网格内容） #

如果需要在展开区域放入 LazyVerticalGrid，直接将其作为内容传入即可，无需基于 LazyVerticalGrid 改造容器本身：

@Composable
fun ExampleUsage() {
    CollapsibleContainer(
        header = {
            Row(
                modifier = Modifier.fillMaxWidth().padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text("网格内容容器", fontSize = 18.sp)
                Text(
                    text = if (remember { mutableStateOf(false) }.value) "收起" else "展开",
                    fontSize = 14.sp,
                    color = Color.Gray
                )
            }
        },
        content = {
            LazyVerticalGrid(
                columns = GridCells.Fixed(2),
                modifier = Modifier.fillMaxWidth().height(240.dp),
                contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
            ) {
                items(12) { index ->
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .aspectRatio(1f)
                            .padding(4.dp)
                            .background(Color.LightGray.copy(alpha = 0.7f)),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("条目 $index", fontSize = 16.sp)
                    }
                }
            }
        }
    )
}

关于 LazyVerticalGrid 的说明 #

不需要直接基于 LazyVerticalGrid 实现展开收起容器，它的定位是网格列表组件。上面的自定义 CollapsibleContainer 是通用容器，可嵌套任意内容（包括 LazyVerticalGrid），这种设计更符合单一职责原则，灵活性更强。

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