Jetpack Compose中垂直列表嵌套水平列表滚动无惯性、不流畅问题的解决咨询

我明白你的痛点——嵌套的LazyRow在LazyColumn里滚动时一抬手就停，完全没有水平滚动该有的惯性，这种卡顿感确实很影响体验。在XML里我们可以通过关闭嵌套滚动解决，在Compose里其实原理类似，就是让LazyRow不参与父级的嵌套滚动交互，这样它就能保留自己的滚动惯性了。

解决方法：禁用LazyRow的嵌套滚动 #

我们可以通过给LazyRow添加一个自定义的NestedScrollConnection，让它不消费或传递滚动事件给父级的LazyColumn，从而保留自身的滚动惯性。

步骤1：创建一个空操作的NestedScrollConnection

首先定义一个不处理任何嵌套滚动事件的连接：

val noOpNestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            return Offset.Zero // 不拦截任何预滚动事件
        }

        override fun onPostScroll(
            consumed: Offset,
            available: Offset,
            source: NestedScrollSource
        ): Offset {
            return Offset.Zero // 不处理任何后滚动事件
        }
    }
}

步骤2：将连接应用到LazyRow

把这个连接通过Modifier.nestedScroll()应用到你的每个LazyRow上：

LazyColumn {
    item { header }
    item { texts }
    item {
        LazyRow(
            modifier = Modifier.nestedScroll(noOpNestedScrollConnection)
        ) {
            items(firstCardList) { /* 你的卡片内容 */ }
        }
        LazyRow(
            modifier = Modifier.nestedScroll(noOpNestedScrollConnection)
        ) {
            items(secondCardList) { /* 你的卡片内容 */ }
        }
    }
}

为什么这样有效？ #

Compose中的LazyColumn和LazyRow默认都支持嵌套滚动，当嵌套时，父级的滚动系统会拦截子级的滚动惯性事件，导致水平滚动一停止触摸就立刻停下。通过使用这个空操作的NestedScrollConnection，我们切断了LazyRow和父级LazyColumn之间的嵌套滚动交互，让LazyRow可以完全自己处理滚动惯性。

更简洁的写法（可选） #

如果你觉得定义完整的NestedScrollConnection太繁琐，也可以用一行代码创建简化版的连接：

LazyRow(
    modifier = Modifier.nestedScroll(remember {
        object : NestedScrollConnection {}
    })
) {
    // 你的卡片列表内容
}

因为默认的NestedScrollConnection方法都会返回Offset.Zero，所以这样写和上面的完整定义效果是一样的。

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