Jetpack Compose中CollapsingToolbarScaffold嵌套ViewPager滚动问题求助

核心问题出在你给外层Column加了verticalScroll，这会让Compose把Column当成可滚动容器，不会给ViewPager分配固定的可用高度，导致ViewPager测量失效，内部列表自然滚不动。之前开启ViewPager嵌套滚动卡顿，是因为两层滚动容器（外层Column和ViewPager内部列表）的滚动事件冲突了。

直接按下面的方案改：

解决方案步骤 #

• 移除Column的verticalScroll修饰符，改用Modifier.fillMaxSize()让它占满CollapsingToolbarScaffold的剩余内容空间
• 把ViewPager的Modifier.weight(1f)换成Modifier.fillMaxSize()，确保它能获取到正确的父布局尺寸
• 关闭ViewPager本身的嵌套滚动，让内部的列表（比如RecyclerView）单独开启嵌套滚动，直接和CollapsingToolbar联动

修改后的完整代码示例 #

val selectedPage = remember { mutableStateOf(0) }

Surface(modifier = Modifier.fillMaxSize(), color = Color(0xFFF1F3F5)) {
    CollapsingToolbarScaffold(
        // 保留你原本的CollapsingToolbar配置，比如toolbar、expandedTitle等
        toolbar = {
            TopAppBar(title = { Text("页面标题") })
        }
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            ScrollableTabRow(
                edgePadding = 0.dp,
                selectedTabIndex = selectedPage.value,
                backgroundColor = Color.Transparent,
                modifier = Modifier
                    .padding(16.dp)
                    .height(36.dp),
                indicator = { },
                divider = { }
            ) {
                listOf("Tab 1", "Tab 2", "Tab 3").forEachIndexed { index, title ->
                    Text(
                        title,
                        modifier = Modifier
                            .padding(horizontal = 16.dp)
                            .clickable { selectedPage.value = index },
                        color = if (selectedPage.value == index) Color.Black else Color.Gray
                    )
                }
            }

            AndroidView(
                factory = { context ->
                    ViewPager(context).also { pager ->
                        pager.adapter = CustomPagerAdapter(context).apply {
                            // 给Adapter加回调，确保每个列表开启嵌套滚动
                            setOnListReadyListener { recyclerView ->
                                ViewCompat.setNestedScrollingEnabled(recyclerView, true)
                            }
                        }
                        pager.currentItem = selectedPage.value
                        pager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
                            override fun onPageScrolled(
                                position: Int,
                                positionOffset: Float,
                                positionOffsetPixels: Int
                            ) = Unit

                            override fun onPageSelected(position: Int) {
                                selectedPage.value = position
                            }

                            override fun onPageScrollStateChanged(state: Int) = Unit
                        })
                        // 关闭ViewPager本身的嵌套滚动，避免冲突
                        ViewCompat.setNestedScrollingEnabled(pager, false)
                    }
                },
                update = { it.currentItem = selectedPage.value },
                modifier = Modifier.fillMaxSize()
            )
        }
    }
}

// 示例CustomPagerAdapter，添加列表初始化回调
class CustomPagerAdapter(private val context: Context) : PagerAdapter() {
    private var onListReadyListener: ((RecyclerView) -> Unit)? = null

    fun setOnListReadyListener(listener: ((RecyclerView) -> Unit)?) {
        onListReadyListener = listener
    }

    override fun getCount() = 3

    override fun isViewFromObject(view: View, `object`: Any) = view == `object`

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val recyclerView = RecyclerView(context).apply {
            layoutManager = LinearLayoutManager(context)
            adapter = InfiniteListAdapter() // 你的无限滚动列表Adapter
        }
        onListReadyListener?.invoke(recyclerView)
        container.addView(recyclerView)
        return recyclerView
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }
}

关键说明 #

1. 为什么去掉外层滚动？
   Compose的verticalScroll会让Column变成“无限高度”容器，ViewPager无法得到准确的测量高度，自然无法正常滚动。让Column占满固定空间，ViewPager才能正确计算自身尺寸。

2. 为什么让内部列表处理嵌套滚动？
   把嵌套滚动的控制权交给内部的RecyclerView，它能直接和CollapsingToolbarScaffold的滚动系统联动，既不会卡顿，还能实现Toolbar随列表滚动折叠的效果。

3. 如果TabRow需要跟随Toolbar折叠？
   可以把ScrollableTabRow移到CollapsingToolbarScaffold的toolbar区域内，配合state.collapsedFraction来调整TabRow的样式（比如透明度、位置），实现更自然的折叠过渡。

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