如何在Jetpack Compose Android中实现透明状态栏

Question

我希望在Jetpack Compose中实现透明状态栏。

我已经集成了Accompanist库，但它对状态栏没有透明效果。

implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"

// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = !isSystemInDarkTheme()

DisposableEffect(systemUiController, useDarkIcons) {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setStatusBarColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    // setStatusBarColor() and setNavigationBarColor() also exist

    onDispose {}
}

我也尝试了这个方法，但是它在手势导航方面存在问题。

val view = LocalView.current
if (!view.isInEditMode) {
SideEffect {
  val window = (view.context as Activity).window
  val insets = WindowCompat.getInsetsController(window, view)
  window.statusBarColor = Color.Transparent.toArgb() // choose a status bar color
  window.navigationBarColor = Color.Transparent.toArgb() // choose a navigation bar color
  insets.isAppearanceLightStatusBars = !useDarkTheme
  insets.isAppearanceLightNavigationBars = !useDarkTheme
 }
}

请提供更好的透明状态栏解决方案。

- hasan_shaikh

---

你是否应用了 WindowCompat.setDecorFitsSystemWindows(window, false)？ - Gabriele Mariotti

是的，这会对手势导航产生影响，这就是为什么我们不想采用这种方法的原因。 - hasan_shaikh

你能发一下截图吗？ - Gabriele Mariotti

已更新问题，请查看。 - hasan_shaikh

关于这篇帖子，你有任何更新吗？ - undefined

尝试更新到最新的androidx.activity:activity:1.8.0，并使用enableEdgeToEdge()功能，非常简单且可定制化。 - undefined

Answer 1

您需要启用全屏模式才能在状态栏下进行绘制：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
}

您可以使用WindowInsets来避免在“系统手势”下绘制：

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
   val insets = windowInsets.getInsets(
       WindowInsetsCompat.Type.systemGestures()
   )
   view.updatePadding(
       insets.left, 
       insets.top, 
       insets.right, 
       insets.bottom
   )
   WindowInsetsCompat.CONSUMED
}

了解更多信息，请查看文档

- Javlon

---

尝试过这个，但是没有效果。 - hasan_shaikh

Answer 2

试一试

将以下行添加到您的主题中

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

在主题中添加此行后，在您想要设置透明状态栏的活动中设置此主题

您希望拥有透明状态栏的活动/容器布局需要设置此属性：

android:fitsSystemWindows="true"

在活动的根布局中添加

- Mayur

---

此外，请查看此链接：https://dev59.com/110b5IYBdhLWcg3wVv-9#29311321 - Mayur

我想使用Jetpack Compose来实现这个。 - hasan_shaikh

Answer 3

1. 在Activity.onCreate中调用WindowCompat.setDecorFitsSystemWindows(window, false)。这个调用请求你的应用在系统UI后面显示。然后你的应用将控制如何使用这些插入来调整UI。

2. 在你的Activity的AndroidManifest.xml条目中设置android:windowSoftInputMode="adjustResize"。这个设置允许你的应用接收软件IME的大小作为插入，当IME在你的应用中出现和消失时，你可以使用这些插入来适当地填充和布局内容。

3. 调整您应用程序主题中系统栏和图标的颜色为透明。

<style name="Theme.MyApplication" parent="Theme.Material.DayNight.NoActionBar">
    <!--Other app theme properties-->
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

来源和更多细节：https://developer.android.com/jetpack/compose/layouts/insets

- Allan Veloso