如何在Jetpack Compose中使状态栏颜色与Material 3中的顶部应用栏颜色相同

Question

我想在 Material 3 Jetpack Compose 项目中将状态栏与顶部应用栏颜色设置为相同，并且在滚动时实现音调高度。如何实现这一点？

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        SmallTopAppBar(
            scrollBehavior = scrollBehavior,

我也希望状态栏也是一样的。

- Sailab Banik

Answer 1

通常情况下，你会使用 Accompanist Jetpack Compose 的系统 UI 控制器 来实现这个功能。

例如，你可以这样使用它：

setContent {
            MyTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val systemUiController = rememberSystemUiController()
                    val useDarkIcons = !isSystemInDarkTheme()

                    SideEffect {
                        systemUiController.setStatusBarColor(
                            color = Color(0xff655D8A),
                            darkIcons = !useDarkIcons
                        )
                    }
                  }
                }

请在您的应用程序 build.gradle 中添加此依赖项：

implementation "com.google.accompanist:accompanist-systemuicontroller:0.31.1-alpha"

- Code Poet