如何让Jetpack Compose中多个LazyColumn实现独立滚动？

问题 #

在Jetpack Compose中实现多个LazyColumn独立滚动时遇到问题：当其中一个LazyColumn处于滚动状态时，滚动另一个LazyColumn，该LazyColumn无响应，反而外层可滚动Column触发滚动。

界面结构：

滚动问题演示：

当前使用的Composable结构代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MultipleLazyColumnScrollTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    MultipleLazyColumnInColumnTest()
                }
            }
        }
    }
}

@Composable
private fun MultipleLazyColumnInColumnTest() {
    Column(
        Modifier
            .fillMaxSize()
            .verticalScroll(
                state = rememberScrollState(),
                flingBehavior = ScrollableDefaults.flingBehavior()
            )
    ) {
        MultiLazyColumnRow()

        val backgroundColorList = listOf(Color.Black, Color.Red, Color.Green, Color.Blue)
        for (index in 0 until 10) {
            Spacer(
                Modifier
                    .background(color = backgroundColorList[index / 4])
                    .fillMaxWidth()
                    .height(100.dp)
            )
        }
    }
}

@Composable
fun MultiLazyColumnRow() {
    Row(
        Modifier
            .fillMaxWidth()
            .height(300.dp)
    ) {
        LazyColumn(
            Modifier
                .background(color = Color.Red.copy(alpha = 0.5f))
                .weight(1f)
        ) {
            items(count = 100) {
                Text(
                    text = it.toString()
                )
            }
        }

        LazyColumn(
            Modifier
                .background(color = Color.Green.copy(alpha = 0.5f))
                .weight(1f)
        ) {
            items(count = 100) {
                Text(text = it.toString())
            }
        }

        LazyColumn(
            Modifier
                .background(color = Color.Blue.copy(alpha = 0.5f))
                .weight(1f)
        ) {
            items(count = 100) {
                Text(text = it.toString())
            }
        }
    }
}

解决方案 #

问题根源是外层Column的verticalScroll会拦截滚动事件，当一个LazyColumn处于滚动状态时，滚动事件处理权被外层Column持有，导致其他LazyColumn无法响应。提供两种可行解决方式：

方式一：为LazyColumn添加嵌套滚动连接 #

给每个LazyColumn添加nestedScroll修饰符，让它们能主动接管滚动事件：

@Composable
fun MultiLazyColumnRow() {
    Row(
        Modifier
            .fillMaxWidth()
            .height(300.dp)
    ) {
        LazyColumn(
            Modifier
                .background(color = Color.Red.copy(alpha = 0.5f))
                .weight(1f)
                .nestedScroll(rememberNestedScrollInteropConnection())
        ) {
            items(count = 100) {
                Text(text = it.toString())
            }
        }

        LazyColumn(
            Modifier
                .background(color = Color.Green.copy(alpha = 0.5f))
                .weight(1f)
                .nestedScroll(rememberNestedScrollInteropConnection())
        ) {
            items(count = 100) {
                Text(text = it.toString())
            }
        }

        LazyColumn(
            Modifier
                .background(color = Color.Blue.copy(alpha = 0.5f))
                .weight(1f)
                .nestedScroll(rememberNestedScrollInteropConnection())
        ) {
            items(count = 100) {
                Text(text = it.toString())
            }
        }
    }
}

rememberNestedScrollInteropConnection()会创建嵌套滚动连接，让LazyColumn能与外层可滚动组件协调事件，触摸时主动请求获取事件处理权，避免外层拦截。

方式二：替换外层Column为LazyColumn #

将外层的Column替换为LazyColumn，利用其惰性加载特性自动协调滚动事件：

@Composable
private fun MultipleLazyColumnInColumnTest() {
    LazyColumn(Modifier.fillMaxSize()) {
        item {
            MultiLazyColumnRow()
        }

        val backgroundColorList = listOf(Color.Black, Color.Red, Color.Green, Color.Blue)
        items(10) { index ->
            Spacer(
                Modifier
                    .background(color = backgroundColorList[index / 4])
                    .fillMaxWidth()
                    .height(100.dp)
            )
        }
    }
}

这种方式下，外层与内部LazyColumn的滚动事件会自动协调，既保证内部LazyColumn独立滚动，也不影响外层正常滚动。

内容的提问来源于stack exchange，提问作者박찬준