启动时状态栏/导航栏显示异常 - Edge To Edge适配问题

问题描述 #

将废弃的Accompanist库SystemUiController替换为Activity的Edge to Edge适配方案后，日常使用正常，但应用启动时状态栏/导航栏会短暂显示不符合预期的状态（仅持续一秒），需解决该闪屏问题。

启动时显示状态：

正常显示状态：

当前代码 #

MainActivity代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge(
            statusBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            ),
            navigationBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            )
        )
        super.onCreate(savedInstanceState)
        setContent {
            CompTestTheme {
                MainScreen()
            }
        }
    }
}

根Composable代码 #

...
if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = Color.Transparent.toArgb()
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
    }
}

MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography,
    content = content
)

解决方案 #

1. 调整enableEdgeToEdge调用时机 #

当前enableEdgeToEdge放在super.onCreate(savedInstanceState)之前，会导致系统默认窗口样式先生效，之后才被你的配置覆盖，进而引发闪屏。必须将enableEdgeToEdge移至super.onCreate之后调用，确保系统初始化窗口后立刻应用Edge to Edge配置：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge(
            statusBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            ),
            navigationBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            )
        )
        setContent {
            CompTestTheme {
                MainScreen()
            }
        }
    }
}

2. 移除根Composable中的重复配置 #

enableEdgeToEdge已设置了状态栏和导航栏的透明样式，根Composable里的window.statusBarColor = Color.Transparent.toArgb()属于重复操作；且SideEffect在Compose重组后执行，若主题的darkTheme与Activity配置不一致，会进一步加剧闪屏。

若需跟随主题切换状态栏文字颜色，可将逻辑整合为如下形式：

// 根Composable中修改
val context = LocalContext.current
val darkTheme = // 你的darkTheme状态
val isLightStatusBar = rememberUpdatedState(!darkTheme)

LaunchedEffect(isLightStatusBar.value) {
    val window = (context as Activity).window
    WindowCompat.getInsetsController(window, window.decorView).isAppearanceLightStatusBars = isLightStatusBar.value
}

MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography,
    content = content
)

3. 配置启动页主题（可选） #

若上述调整后仍有轻微闪屏，可在启动页主题中预先设置状态栏和导航栏样式，让启动时窗口样式与应用内保持一致：
在res/values/styles.xml中添加：

<style name="SplashTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowLightStatusBar">true</item> <!-- 和你的配置保持一致 -->
</style>

然后在AndroidManifest.xml中为MainActivity设置该主题：

<activity
    android:name=".MainActivity"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

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