Jetpack Compose中Column与LazyList嵌套滚动及拖拽排序实现咨询

方案1：单LazyColumn混合布局（优先推荐） #

这是最符合Compose滚动体系的实现方式，天然规避嵌套滚动兼容问题，同时能完整支持拖拽重排能力：

• 所有内容（Header、两组列表项）都放在同一个LazyColumn中作为不同类型的item，天生统一滚动，无需额外处理滚动逻辑
• 拖拽重排库支持区分可拖拽/不可拖拽item：仅给需要拖拽的列表项添加draggableHandle修饰符，Header等普通item不需要添加即可不参与重排，还可通过下标过滤实现多组拖拽区域隔离

示例代码：

val reorderableState = rememberReorderableLazyListState(
    onMove = { from, to ->
        // 过滤Header的下标，禁止拖拽到Header位置
        if (to.index != 0) {
            // 替换为自身数据集合的重排逻辑
            yourDataList.move(from.index, to.index)
        }
    }
)

LazyColumn(
    state = reorderableState.listState,
    modifier = Modifier.reorderable(reorderableState)
) {
    // 非拖拽Header项
    item {
        Text(text = "Header", modifier = Modifier.padding(16.dp))
    }

    // 第一组可拖拽列表项
    items(firstGroupList, key = { it.id }) { item ->
        Column(Modifier.draggableHandle()) {
            Text(text = "第一组项：${item.content}")
        }
    }

    // 第二组的分隔标题（非拖拽）
    item {
        Text(
            text = "第二组",
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }

    // 第二组可拖拽列表项
    items(secondGroupList, key = { it.id }) { item ->
        Column(Modifier.draggableHandle()) {
            Text(text = "第二组项：${item.content}")
        }
    }
}

该方案保留了LazyColumn的懒加载特性，性能最优，滚动体验完全符合原生规范。

方案2：嵌套结构兼容方案（仅特殊场景使用） #

如果业务逻辑必须保留外层Column+多个LazyColumn的结构，可通过禁用内部LazyColumn的滚动能力，让所有滚动事件由外层统一处理，无需额外适配Header的嵌套滚动：

• 给外层Column添加verticalScroll修饰符作为统一滚动容器
• 内部所有LazyColumn禁用自身滚动，高度自适应内容，所有item跟随外层滚动

示例代码：

val outerScrollState = rememberScrollState()

Column(
    modifier = Modifier
        .verticalScroll(outerScrollState)
        // 可选：添加嵌套滚动兼容连接，适配与视图层的嵌套滚动交互
        .nestedScroll(rememberNestedScrollInteropConnection())
) {
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        userScrollEnabled = false // 禁用内部滚动，交给外层统一处理
    ) {
        repeat(20) {
            item { Text(text = "第一组项：$it", modifier = Modifier.padding(8.dp)) }
        }
    }

    Text(text = "Header", modifier = Modifier.padding(16.dp))

    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        userScrollEnabled = false
    ) {
        repeat(20) {
            item { Text(text = "第二组项：$it", modifier = Modifier.padding(8.dp)) }
        }
    }
}

该方案的缺点是内部LazyColumn会一次性渲染所有item，失去懒加载特性，item数量较多时会出现性能损耗，仅适合item数量少的场景使用。

内容的提问来源于stack exchange，提问作者Jan Veselý