Jetpack Compose 如何实现LazyColumn双层粘性吸顶Header效果

可以实现该双层粘性吸顶列表效果。你遇到的报错是因为嵌套了两个同方向的垂直滚动LazyColumn，Jetpack Compose默认禁止同方向可滚动布局嵌套，避免出现滚动逻辑冲突。

解决方案 #

不需要嵌套LazyColumn，直接把所有主粘性Header、子粘性Header、列表项都放在同一个LazyColumn的DSL中声明即可。LazyColumn原生支持多个stickyHeader，会自动实现依次吸顶、后出现的Header顶走前一个同层级Header的效果，刚好匹配双层粘性需求。

改造后的实现代码：

@Composable
fun MainList(data: List<Item>) {
    // 先按主类型分组
    val mainGroup = data.groupBy { it.type }
    LazyColumn {
        mainGroup.forEach { (mainType, mainGroupItems) ->
            // 主粘性Header
            stickyHeader {
                Header(text = mainType)
            }
            // 遍历当前主分组下的子分组
            val subGroups = mainGroupItems.groupBy { it.subType }
            subGroups.forEach { (subType, subItems) ->
                // 子粘性Header
                stickyHeader {
                    Header(text = subType)
                }
                // 子分组下的普通列表项
                items(subItems) { item ->
                    SimpleItem(item = item)
                }
            }
        }
    }
}

效果说明 #

该实现中，主Header会固定吸在列表最顶部，直到下一个主Header滚动到顶部将它替换；子Header会吸在主Header的下方，直到同主分类下的下一个子Header滚动到对应位置将它替换，完全符合预期的交互效果。如果你的主Header有固定高度，可以给子Header的根布局加上对应高度的顶部内边距，避免子Header被主Header遮挡。

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