跳转到内容
View in the app

A better way to browse. Learn more.

彼岸论坛

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

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

发表于

想要的效果如下:

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))
            }
        }
    }
}

Featured Replies

No posts to show

创建帐户或登录来提出意见

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.