如何解决Compose应用加载时初始白色背景闪烁的问题

问题根源 #

App冷启动阶段，系统会先加载应用进程、初始化Activity，这个阶段会优先显示系统控制的初始窗口背景（windowBackground），你在Compose代码中设置的Surface背景需要等Compose渲染链路初始化完成后才会生效，两者中间的时间差就会出现你看到的白屏。

修复步骤 #

• 第一步：配置启动主题
  在res/values/themes.xml（或styles.xml）中新增启动专用主题，将窗口背景设置为你需要的primaryVariant颜色：

<resources>
    <!-- 启动专用主题 -->
    <style name="LaunchTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@color/primaryVariant</item>
        <!-- 同步修改状态栏颜色可以取消下面两行的注释 -->
        <!-- <item name="android:windowDrawsSystemBarBackgrounds">true</item> -->
        <!-- <item name="android:statusBarColor">@color/primaryVariant</item> -->
    </style>

    <!-- 应用正常运行使用的主主题 -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- 保持和你原有主题配置一致即可 -->
    </style>
</resources>

• 第二步：修改Manifest配置
  给MainActivity设置启动时使用刚才定义的LaunchTheme：

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

• 第三步：Activity中切换回正常主题
  在MainActivity的super.onCreate执行前切换回应用正常主题，避免后续界面样式受启动主题影响，修改后的代码如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // 必须在super.onCreate之前切换主题
        setTheme(R.style.AppTheme)
        super.onCreate(savedInstanceState)
        setContent {
            SOIssueReproduceTheme {
                Surface(
                    color = MaterialTheme.colors.primaryVariant,
                    modifier = Modifier.fillMaxSize()
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

补充优化建议 #

• 确保colors.xml中定义的primaryVariant色值和Compose主题里的MaterialTheme.colors.primaryVariant完全一致，切换时不会出现视觉断层
• 如果你不需要系统启动预览效果，也可以在LaunchTheme中添加<item name="android:windowDisablePreview">true</item>，但这种方式会在启动时出现短时间无响应的视觉感受，更推荐使用设置windowBackground的方案

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