Android Compose如何设置系统状态栏和导航栏与TopAppBar同色？

错误原因 #

• MaterialTheme.colorScheme是Composable函数，必须在Composable上下文内调用
• 原代码将SideEffect和systemUiController的初始化放在了MeganurseryResourceMgtTheme外部，此时还未进入主题的Composable作用域，无法获取主题的配色信息
• SideEffect的lambda本身不属于Composable上下文，直接调用MaterialTheme.colorScheme必然触发报错

修正方案 #

将systemUiController的初始化和SideEffect代码移动到MeganurseryResourceMgtTheme内部，确保处于主题的Composable作用域中。这样既能正确获取主题颜色，还能在主题切换时通过Composable自动重组，同步更新系统栏颜色。

修正后的代码 #

import com.google.accompanist.systemuicontroller.rememberSystemUiController

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MeganurseryResourceMgtTheme {
                val systemUiController = rememberSystemUiController()
                val surfaceColor = MaterialTheme.colorScheme.surface
                
                SideEffect {
                    systemUiController.setSystemBarsColor(
                        color = surfaceColor
                    )
                }

                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    AppNavigation()
                }
            }
        }
    }
}

额外说明 #

切换明暗主题时，MeganurseryResourceMgtTheme会触发重组，surfaceColor会自动获取新主题的颜色，SideEffect也会重新执行，系统栏颜色就会同步更新。如果需要更精准的状态监听，还可以用rememberUpdatedState包装surfaceColor，但主题切换场景下直接引用已经足够满足需求。

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