Compose中VerticalPager嵌套可滚动Column时滚动物理特性丢失问题

问题描述 #

当VerticalPager仅有一页（或处于最后一页）时，在Pager区域滑动可以带动外层Column滚动，这是预期行为，但此时滚动会失去物理动量——手指离开屏幕后滚动立即停止，无法保持惯性滑动。

复现代码 #

@Composable
fun NestedViewPager() {
    Column(
        modifier = Modifier.fillMaxWidth().verticalScroll(rememberScrollState())
    ) {
        val pagerState = rememberPagerState(pageCount = { 1 })
        VerticalPager(
            state = pagerState,
            modifier = Modifier.fillMaxWidth().height(400.dp),
        ) { page ->
            Box(modifier = Modifier.fillMaxSize().background(color = Color.Blue)) {
                Text(text = "Page $page")
            }
        }
        Spacer(modifier = Modifier.height(700.dp))
    }
}

解决方案 #

通过自定义NestedScrollConnection，手动处理Pager和父布局之间的滚动事件传递，确保动量能正确传递给外层Column：

@Composable
fun FixedNestedViewPager() {
    val columnScrollState = rememberScrollState()
    Column(
        modifier = Modifier.fillMaxWidth().verticalScroll(columnScrollState)
    ) {
        val pagerState = rememberPagerState(pageCount = { 1 })
        VerticalPager(
            state = pagerState,
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp)
                .nestedScroll(object : NestedScrollConnection {
                    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                        // 当Pager无法自身滚动时，直接让父布局处理滚动
                        val canPagerScroll = pagerState.canScrollForward || pagerState.canScrollBackward
                        return if (!canPagerScroll) {
                            columnScrollState.dispatchRawDelta(available.y.toFloat())
                            available
                        } else {
                            Offset.Zero
                        }
                    }

                    override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
                        // 传递剩余动量给父布局，实现惯性滚动
                        val canPagerScroll = pagerState.canScrollForward || pagerState.canScrollBackward
                        return if (!canPagerScroll) {
                            columnScrollState.fling(available.y.toFloat())
                            available
                        } else {
                            super.onPostFling(consumed, available)
                        }
                    }
                })
        ) { page ->
            Box(modifier = Modifier.fillMaxSize().background(color = Color.Blue)) {
                Text(text = "Page $page")
            }
        }
        Spacer(modifier = Modifier.height(700.dp))
    }
}

原理说明 #

• onPreScroll阶段：判断Pager是否还能自身滚动（有更多页面或未到边界），如果不能，就把滚动事件直接交给Column的滚动状态处理，保证滑动操作能直接作用到外层布局。
• onPostFling阶段：当手指离开屏幕产生滚动动量时，同样判断Pager是否可滚动，若不可，则把剩余动量传递给Column，让外层布局保持惯性滚动。

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