Jetpack Compose：滚动时无法保持CenterAlignedTopAppBar颜色恒定

我太懂你这种糟心的感觉了——明明设置了TopAppBar的容器颜色，结果一滚动就变样，完全不是想要的效果！问题其实出在你没覆盖滚动状态下的颜色参数。

默认情况下，当你给CenterAlignedTopAppBar绑定pinnedScrollBehavior后，滚动过程中Compose会自动切换到scrolledContainerColor这个参数对应的颜色，而这个参数的默认值和你设置的containerColor可能并不一致（哪怕用的是主题色，滚动状态下的默认处理也会有差异）。

解决方法很简单，只需要在centerAlignedTopAppBarColors里把scrolledContainerColor也设置成和containerColor一样的值就行：

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        CenterAlignedTopAppBar(
            title = {},
            modifier = Modifier.wrapContentHeight(),
            colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                containerColor = MaterialTheme.colorScheme.surface,
                scrolledContainerColor = MaterialTheme.colorScheme.surface // 关键：设置滚动时的颜色和静止时一致
            ),
            scrollBehavior = scrollBehavior,
        )
    },
) { innerPadding ->
    // 这里放你的页面内容，记得用innerPadding处理内边距哦
}

这样调整之后，不管是静止状态还是滚动过程中，TopAppBar的颜色都会牢牢保持你设置的surface色，不会再出现莫名切换的情况啦。如果之后你想让滚动时的颜色有不同效果，也可以单独修改scrolledContainerColor的值来实现。

备注：内容来源于stack exchange，提问作者mml ch