菜鸡问个 Android Jetpack Compose 的问题，如何实现 VerticalPager 嵌套一个可滚动的 Cloumn

1次阅读

共计 1277 个字符，预计需要花费 4 分钟才能阅读完成。

想要的效果如下:

https://youtube.com/shorts/unI7ztB5EE4?si=dxGw2OFCGLy6dawp

有尝试使用 NestedScrollConnection 但没解决问题，外层的 VerticalPager 想要到下一页或者上一页，必须滑动很长的距离，体验很不好。想来是自己太菜了，特来求助各位大佬。另外有个疑问，我看文档描述，onPreScroll 方法返回值便是父级容器将要消耗的滚动量，但我直接返回 Offset(0.0f, available.y) 按理说应该子容器 Column 不会滚动，而是作为父容器的 VerticalPager 去消耗滚动量，进入下一页。但实际情况却是两个容器都不会出现滚动效果。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun NestedScrollExample(modifier: Modifier = Modifier) {
    val pageCount = 5
    val pagerState = rememberPagerState(pageCount = { pageCount})
    val scrollStates = List(pageCount) {rememberScrollState() }

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                val delta = available.y
                val page = pagerState.currentPage
                val scrollState = scrollStates[page]

                // only test the scroll down case
                // If the user scrolls down, and the column item of the current page has not scrolled to the bottom, let the child consume the scroll.
                if (delta < 0) {return if (scrollState.canScrollForward) Offset.Zero else Offset(0.0f, delta)
                }

                return super.onPreScroll(available, source)
            }
        }

    }


    VerticalPager(
        state = pagerState,
        modifier = modifier
            .nestedScroll(nestedScrollConnection)
            .fillMaxSize(),) {page ->
        Column(
            modifier = Modifier
                .verticalScroll(scrollStates[page])
                .fillMaxSize()) {repeat(20) {Text("Page $page item $it", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

正文完