Compose VerticalPager嵌套可滚动项导致滚动卡顿问题求解

针对你使用androidx.compose.foundation:foundation:1.5.0-beta03时，VerticalPager内部可滚动Text出现的滚动不流畅问题，提供以下两种解决思路：

方法一：完全禁用内部组件的嵌套滚动 #

通过自定义NestedScrollConnection，让内部可滚动组件消费所有垂直滚动事件，不再传递给父级VerticalPager，彻底避免滚动冲突：

@Composable
fun FixedBugSample(text: String) {
    val state = rememberPagerState() { 15 }
    Column {
        VerticalPager(state = state) { page ->
            Column {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(0.7f)
                        .background(Color.White)
                )
                Text(
                    text = text,
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                        .nestedScroll(object : NestedScrollConnection {
                            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                                // 消费全部垂直滚动事件，阻止事件传递给VerticalPager
                                return available
                            }
                        }),
                    color = Color.White
                )
            }
        }
    }
}

方法二：优化滚动事件传递逻辑（保留部分嵌套滚动） #

如果你希望在Text滚动到边界时，再让VerticalPager接管滚动，可以调整NestedScrollConnection的逻辑：

@Composable
fun OptimizedBugSample(text: String) {
    val state = rememberPagerState() { 15 }
    val textScrollState = rememberScrollState()
    Column {
        VerticalPager(state = state) { page ->
            Column {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(0.7f)
                        .background(Color.White)
                )
                Text(
                    text = text,
                    modifier = Modifier
                        .verticalScroll(textScrollState)
                        .nestedScroll(object : NestedScrollConnection {
                            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                                val canScrollUp = textScrollState.canScrollBackward
                                val canScrollDown = textScrollState.canScrollForward
                                return when {
                                    // 向下滚动且Text已到底，交给VerticalPager处理
                                    available.y > 0 && !canScrollDown -> Offset.Zero
                                    // 向上滚动且Text已到顶，交给VerticalPager处理
                                    available.y < 0 && !canScrollUp -> Offset.Zero
                                    // 其他情况由Text自己处理滚动
                                    else -> available
                                }
                            }
                        }),
                    color = Color.White
                )
            }
        }
    }
}

补充说明 #

如果你的场景不需要内部Text和VerticalPager的嵌套交互，方法一的完全禁用是最直接有效的方案，能让两种滚动操作的过渡完全独立流畅。

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