Jetpack Compose中App/Scaffold白色背景修改无效问题求解

问题原因 #

1. Surface组件的color属性优先级高于Modifier中设置的background，你同时设置两个的话，只有color = Color.Red会生效，Modifier的DarkGray背景无效。
2. 你的Surface背景被上层的Scaffold默认背景覆盖了：Material组件库的Scaffold默认会使用主题中定义的background颜色（默认是白色），会完全覆盖下层父布局的背景色，所以你给Surface设的颜色看不到。
3. 你当前看到的青色是Scaffold内部Column设置的调试背景，只覆盖了内容区域，上下的导航栏、底部栏的白色还是Scaffold的默认背景。
   

解决方法 #

1. 直接在Scaffold参数中指定背景色即可，不需要改外层Surface的配置：
   如果用的是Material 2版本的Compose组件，加backgroundColor参数：

Scaffold(
    backgroundColor = Color.Red, // 替换成你想要的背景色
    topBar = { TopAppBar(title = { Text(appTitle) }, navigationIcon = navigationIcon) },
    floatingActionButtonPosition = FabPosition.End,
    // 其余原有代码保持不变
    ...
)

如果用的是Material 3版本的Compose组件，加containerColor参数：

Scaffold(
    containerColor = Color.Red, // 替换成你想要的背景色
    topBar = { TopAppBar(title = { Text(appTitle) }, navigationIcon = navigationIcon) },
    floatingActionButtonPosition = FabPosition.End,
    // 其余原有代码保持不变
    ...
)

2. 调试完成后去掉Column的background(Color.Cyan)配置，就能透出Scaffold的背景色。
3. 如果希望整个App全局使用统一的背景色，可以直接修改ChakkarTheme中colorScheme的background属性值，不需要每个页面的Scaffold单独配置。

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