Jetpack Compose：如何实现带可隐藏筛选器的统一滚动LazyVerticalGrid？

核心思路是用单个LazyVerticalGrid作为页面唯一滚动容器，将筛选器区域打包成一个单独的item放入其中，同时在这个item内部用AnimatedVisibility包裹所有筛选器组件，既保留显示/隐藏动画，又避免多滚动区域的问题。

为什么你的理想方案无法直接生效？ #

LazyVerticalGrid的lambda属于LazyGridScope，该作用域仅允许调用item()/items()这类LazyGrid专属方法，不能直接放置AnimatedVisibility这类普通Composable组件，所以必须把筛选器集合封装到一个item()内部。

可行代码示例 #

方案1：内部嵌套LazyVerticalGrid（适合筛选器需要严格网格布局的场景）

LazyVerticalGrid(columns = GridCells.Fixed(2)) { // 主网格列数按需调整
    // 筛选器触发按钮
    item {
        ShowFilters()
    }
    // 可隐藏的筛选器区域
    item {
        AnimatedVisibility(visible = isShowing) {
            // 内部网格列数建议和主网格保持一致，视觉更统一
            LazyVerticalGrid(columns = GridCells.Fixed(2)) {
                item { FilterOne() }
                item { FilterTwo() }
                // ... 其他筛选器组件
                item { FilterN() }
            }
        }
    }
    // 项目列表
    items(someData.projects) { project ->
        ProjectItem(project) // 你的项目项布局
    }
}

方案2：用FlowRow实现流式筛选器（适合筛选器数量不固定、需要自适应换行的场景）

如果筛选器是流式布局，可以使用FlowRow（需依赖Compose Material3或Accompanist FlowLayout库）替代内部LazyVerticalGrid，更轻量：

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    item {
        ShowFilters()
    }
    item {
        AnimatedVisibility(visible = isShowing) {
            FlowRow(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                FilterOne()
                FilterTwo()
                // ... 其他筛选器组件
                FilterN()
            }
        }
    }
    items(someData.projects) { project ->
        ProjectItem(project)
    }
}

方案优势 #

• 整个页面仅一个滚动容器，筛选器与项目列表同步滚动，解决多滚动区域的体验问题；
• AnimatedVisibility的显示/隐藏动画完全保留；
• 无需提前知道筛选器或项目列表的尺寸，LazyVerticalGrid会自动处理滚动和布局适配。

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