打造沉浸式 Android 应用程序：使用 Jetpack Compose 巧妙实现状态栏自定义

Android

2023-12-11 09:48:28

沉浸式状态栏：在 Android 应用程序中使用 Jetpack Compose 营造沉浸式体验

什么是沉浸式状态栏？

沉浸式状态栏是一种让应用程序内容与设备状态栏无缝融合的设计技术。这种技术创造了一种身临其境和沉浸式的用户体验，让用户可以专注于应用程序本身。

使用 Jetpack Compose 实现沉浸式状态栏

Jetpack Compose 是 Google 官方提供的现代 UI 工具包，它采用声明式编程模型，让您能用简洁易懂的代码创建复杂的 UI 布局。借助 Jetpack Compose，实现沉浸式状态栏非常简单。

第 1 步：添加 WindowInsets

WindowInsets 表示屏幕边缘周围的系统级填充，其中包括状态栏。通过 WindowInsets，您可以获取状态栏的高度并将其应用于布局。

@Composable
fun MyScreen() {
    val insets = WindowInsets.systemBars.top
    Box(Modifier.windowInsetsTop(insets)) {
        // Your app content goes here
    }
}

第 2 步：设置状态栏颜色

要设置状态栏颜色，请使用 WindowInsetsController。您可以将其作为 SideEffect 在 Composable 函数内使用。

val windowInsetsController = WindowInsetsController.current()
windowInsetsController.setSystemBarsColor(Color.Blue)

第 3 步：处理屏幕方向更改

当屏幕方向发生更改时，状态栏高度可能会发生变化。使用 WindowInsets.observeAsFlow() 观察 WindowInsets 的更改，并在发生更改时更新状态栏颜色。

val insetsFlow = WindowInsets.observeAsFlow()
LaunchedEffect(insetsFlow) {
    insetsFlow.collect { insets ->
        windowInsetsController.setSystemBarsColor(Color.Blue)
    }
}

最佳实践