Android Compose LargeTopAppBar containerColor不生效问题求助

问题描述 #

我设置了LargeTopAppBar的containerColor为主题主色，但完全展开时只有默认AppBar颜色生效，折叠状态下颜色是正常的。请问是不是我的配置有问题？

相关代码 #

@Composable
fun CollapsingToolbarScreen(){

    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
    val isCollapsed: Boolean by remember {
        derivedStateOf {
            scrollBehavior.state.collapsedFraction == 1f
        }
    }

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = { LibraryTopBar(scrollBehavior, isCollapsed) },
    ) { innerPadding ->

        LazyColumn(
           modifier = Modifier.padding(innerPadding)
        ){
            items(count =50) {
                ListItem(
                    text = { Text(text = "Item $it") },
                    icon = {
                        Icon(
                            imageVector = Icons.Default.Favorite,
                            contentDescription = "Favorite",
                            tint = MaterialTheme.colorScheme.primary
                        )
                    }
                )
            }
        }
    }
}

@Composable
private fun LibraryTopBar(scrollBehavior: TopAppBarScrollBehavior, isCollapsed: Boolean) =
    LargeTopAppBar(
        scrollBehavior = scrollBehavior,
        title = { Text(text = "Library") },
        colors = TopAppBarDefaults.largeTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.primary,
            scrolledContainerColor = MaterialTheme.colorScheme.primary,
            titleContentColor = if (isCollapsed) {
                MaterialTheme.colorScheme.onBackground
            } else {
                MaterialTheme.colorScheme.onPrimary
            },
        ),
    )

问题演示 #

展开状态下TopAppBar显示默认颜色，折叠后切换为设置的主题主色，颜色切换不符合预期。

问题原因与解决方法 #

问题出在对TopAppBarDefaults.largeTopAppBarColors参数的理解偏差：LargeTopAppBar完全展开时的背景色是由expandedContainerColor控制的，而非containerColor。你之前只设置了containerColor（折叠状态）和scrolledContainerColor（滚动过渡状态），漏掉了展开状态对应的参数，导致展开时使用默认颜色。

修改后的代码 #

只需在largeTopAppBarColors中添加expandedContainerColor配置即可：

@Composable
private fun LibraryTopBar(scrollBehavior: TopAppBarScrollBehavior, isCollapsed: Boolean) =
    LargeTopAppBar(
        scrollBehavior = scrollBehavior,
        title = { Text(text = "Library") },
        colors = TopAppBarDefaults.largeTopAppBarColors(
            // 完全展开时的容器颜色
            expandedContainerColor = MaterialTheme.colorScheme.primary,
            // 折叠状态下的容器颜色
            containerColor = MaterialTheme.colorScheme.primary,
            // 滚动过渡阶段的容器颜色
            scrolledContainerColor = MaterialTheme.colorScheme.primary,
            titleContentColor = if (isCollapsed) {
                MaterialTheme.colorScheme.onBackground
            } else {
                MaterialTheme.colorScheme.onPrimary
            },
        ),
    )

参数说明 #

TopAppBarDefaults.largeTopAppBarColors的三个核心颜色参数分工明确：

• expandedContainerColor：LargeTopAppBar完全展开、未进入滚动状态时的背景色
• containerColor：LargeTopAppBar完全折叠为普通TopAppBar样式时的背景色
• scrolledContainerColor：滚动过程中（从展开到折叠的过渡阶段）的背景色

将这三个参数统一设置为你需要的颜色，就能让TopAppBar在所有状态下保持一致的显示效果。

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