Jetpack Compose中使用DataStore切换UI时屏幕闪烁问题求助

问题描述 #

使用Jetpack Compose构建UI时，应用启动会判断用户是否首次使用：首次用户加载ScreenStarter()，非首次用户加载AppContent()。但非首次用户启动时，屏幕会短暂显示ScreenStarter()再切换到AppContent()，出现明显闪烁。推测是DataStore异步获取数据，初始值触发了首次加载逻辑导致。

代码示例 #

{
    /**
     * This is the Main MES app that will
     * determine which screen content to show
     **/

    /** Load the app settings from datastore **/
    val appSettings = application.datastore.data.collectAsState(initial = MesAppSettings()).value

    /** Set the correct app theme that the user has set **/
    val darkTheme = when (appSettings.appTheme) {
        AppTheme.FOLLOW_SYSTEM -> isSystemInDarkTheme()
        AppTheme.DARK -> true
        AppTheme.LIGHT -> false
    }

    MesTheme(
        darkTheme = darkTheme // Load the app theme
    ) {
        /** Determine screen content **/
        if (!appSettings.isFirstTimeLogging) {
            AppContent(
                application = application,
                appSettings = appSettings,
                widthSizeClass = widthSizeClass
            )
        } else {
            ScreenStarter(
                application = application,
                requestMultiplePermissions = requestMultiplePermissions
            )
        }
    }
}

解决方案 #

1. 等待DataStore加载完成再渲染界面 #

核心思路是在DataStore数据未返回时，显示统一的加载占位（如空白页、进度指示器），避免触发错误的界面逻辑：

val appSettingsState = application.datastore.data.collectAsState(initial = null)
val appSettings = appSettingsState.value

// 数据加载中，显示占位
if (appSettings == null) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        CircularProgressIndicator()
    }
} else {
    val darkTheme = when (appSettings.appTheme) {
        AppTheme.FOLLOW_SYSTEM -> isSystemInDarkTheme()
        AppTheme.DARK -> true
        AppTheme.LIGHT -> false
    }

    MesTheme(darkTheme = darkTheme) {
        if (!appSettings.isFirstTimeLogging) {
            AppContent(
                application = application,
                appSettings = appSettings,
                widthSizeClass = widthSizeClass
            )
        } else {
            ScreenStarter(
                application = application,
                requestMultiplePermissions = requestMultiplePermissions
            )
        }
    }
}

2. 使用官方SplashScreen API（推荐） #

Android 12+提供的SplashScreen API可在启动时展示统一画面，直到数据加载完成再切换，彻底解决闪烁：

步骤1：配置启动屏主题

在res/values/themes.xml中添加启动屏主题：

<style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/splash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/ic_splash_icon</item>
    <item name="postSplashScreenTheme">@style/Theme.MesApp</item>
</style>

步骤2：给MainActivity设置主题

修改AndroidManifest.xml：

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

步骤3：在Activity中控制启动屏显示时机

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val splashScreen = installSplashScreen()
        
        lifecycleScope.launch {
            // 等待DataStore返回数据
            val appSettings = application.datastore.data.first()
            // 数据加载完成后关闭启动屏
            splashScreen.setKeepOnScreenCondition { false }
            
            setContent {
                val darkTheme = when (appSettings.appTheme) {
                    AppTheme.FOLLOW_SYSTEM -> isSystemInDarkTheme()
                    AppTheme.DARK -> true
                    AppTheme.LIGHT -> false
                }
                MesTheme(darkTheme = darkTheme) {
                    if (!appSettings.isFirstTimeLogging) {
                        AppContent(
                            application = application,
                            appSettings = appSettings,
                            widthSizeClass = widthSizeClass
                        )
                    } else {
                        ScreenStarter(
                            application = application,
                            requestMultiplePermissions = requestMultiplePermissions
                        )
                    }
                }
            }
        }
    }
}

3. 调整初始值默认逻辑（仅适合特定场景） #

如果非首次用户占绝大多数，可以修改MesAppSettings()的默认值，将isFirstTimeLogging设为false，减少闪烁概率。但这种方法有风险：首次用户启动时可能会闪一下AppContent()，仅作为临时方案使用。

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