You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

TopAppBar与HorizontalPager联动滚动时出现跳变异常,求解决办法

Compose中HorizontalPager内滚动时TopAppBar折叠异常跳变问题

我在Compose中实现了包含TopAppBar和HorizontalPager的Scaffold,需求是垂直滚动HorizontalPager内的内容时,TopAppBar能够折叠。

以下是我的实现代码:

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun MainScreen() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Lagging Demonstration") },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->

        val loremIpsum = LoremIpsum(1000)
        val pagerState = rememberPagerState(pageCount = { 3 })

        HorizontalPager(
            modifier = Modifier.padding(innerPadding),
            state = pagerState
        ) { page ->
            Column(
                modifier = Modifier.verticalScroll(rememberScrollState())
            ) {
                Text(
                    text = loremIpsum.values.joinToString(),
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

运行上述代码后,向上滚动内容时,TopAppBar出现了异常跳变的现象:向上滚动时TopAppBar无法平滑折叠,而是出现突然的位置跳变。

我的依赖配置如下:

implementation "androidx.compose.ui:ui:1.6.2"
implementation 'androidx.compose.material3:material3:1.2.0'
implementation 'androidx.activity:activity-compose:1.8.2'

我在Google Issue Tracker上找到了相关问题,其中建议将nestedScroll(scrollBehavior.nestedScrollConnection)修饰符应用到Column上,但该方案并未解决我的问题。

请问是否有可行的解决办法?若您能够复现该问题,烦请为Google Issue Tracker上的对应问题投票。


内容的提问来源于stack exchange,提问作者BenjyTec

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.25 16:05:05