Material 3中TopAppBar容器色及状态栏配色方案咨询

一、TopAppBar 容器色选择 #

• 若要让 FloatingActionButton (FAB) 更突出，优先用 secondaryContainer 作为 TopAppBar 容器色：
  • Material 3 配色逻辑里，secondaryContainer 视觉权重低于 primaryContainer，不会抢 FAB 的视觉焦点，能强化 FAB 作为核心操作入口的地位。
  • 搭配 onSecondaryContainer 作为文字颜色，符合对比度规范，可读性有保障。
• 若更侧重 TopAppBar 的导航主导性，选 primaryContainer 更合适，这时建议把 FAB 背景色设为 secondary，维持界面视觉层级平衡。

二、状态栏与 TopAppBar 的颜色统一建议 #

• Material 3 设计规范要求，状态栏和 TopAppBar 建议使用同一颜色，保证顶部视觉区域的连贯性，提升界面整体统一性。
• 针对 rememberSystemUiController() 没有 getStatusBarColor() 的问题，可通过以下方式同步颜色：
  1. 先定义要使用的容器色变量
  2. 用 LaunchedEffect 监听颜色变化，同步设置状态栏颜色
     修改后的示例代码：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TestAppBar(){
    val systemUiController = rememberSystemUiController()
    val containerColor = MaterialTheme.colorScheme.secondaryContainer
    
    // 同步状态栏与TopAppBar颜色
    LaunchedEffect(containerColor) {
        systemUiController.setStatusBarColor(containerColor)
    }

    TopAppBar(
        title = {
            Text(
                text = "Title",
                color = MaterialTheme.colorScheme.onSecondaryContainer
            )
        },
        actions = {},
        colors = TopAppBarDefaults.smallTopAppBarColors(
            containerColor = containerColor,
            titleContentColor = MaterialTheme.colorScheme.onSecondaryContainer
        )
    )
}

• 如果启用滚动行为（如 pinnedScrollBehavior），可以监听 scrollBehavior.state 的变化，动态切换状态栏颜色，比如滚动时切换为 scrolledContainerColor。

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