Jetpack Compose启动时ViewModel加载数据未同步至UI的解决咨询

我用Jetpack Compose开发Android应用，将应用状态通过Model持久化到本地磁盘的功能正常，但启动时UI先完成绘制，ViewModel创建后调用init方法从文件加载数据，加载的数据无法立刻显示在UI上，只有用户交互修改状态后UI才会更新。推测是UI绘制早于数据加载完成，请问怎么实现启动时加载的数据直接同步到UI？

提供的代码 #

GameViewModel 代码 #

class GameViewModel : ViewModel() {

    private val _uiState = MutableStateFlow(GameState())
    val uiState: StateFlow<GameState> = _uiState.asStateFlow()

    private val fileName = "game_state.json"

    private lateinit var context: Context

    private lateinit var gson: Gson
    fun init(context: Context, gson: Gson) {
        this.context = context
        this.gson = gson

        _uiState.value = loadGameStateFromFile()
    }


     private fun addPoint(team: Team) {
            if (team == Team.HOME) {
                _uiState.update { currentState ->
                    currentState.copy(
                        hPoints = _uiState.value.hPoints.plus(1)
                    )
                }
                saveGameStateToFile(_uiState.value)
            } else {
                _uiState.update { currentState ->
                    currentState.copy(
                        aPoints = _uiState.value.aPoints.plus(1)
                    )
                }
                saveGameStateToFile(_uiState.value)
            }
        }
//other functions that modify the state here

    private fun reset(): GameState {
        val gameState = GameState()
        _uiState.value = gameState
        return gameState

    }

    private fun loadGameStateFromFile(): GameState {
        val file = File(context.filesDir, fileName)
        val gameState: GameState
        return if (file.exists()) {
            val jsonString = file.readText()
            gameState = gson.fromJson(jsonString, GameState::class.java)
            gameState
        } else {
            GameState()
        }
    }

    private fun saveGameStateToFile(gameState: GameState) {
        val jsonString = gson.toJson(gameState)
        val file = File(context.filesDir, fileName)
        file.writeText(jsonString)
    }
}

MainActivity 初始化代码 #

override fun onCreate(savedInstanceState: Bundle?) {

    val gson = GsonBuilder()
        .excludeFieldsWithoutExposeAnnotation()
        .create()

    val gameViewModel = ViewModelProvider(this).get(GameViewModel::class.java)
    gameViewModel.init(this.application, gson)

    installSplashScreen()
    super.onCreate(savedInstanceState)
    setTheme(android.R.style.Theme_DeviceDefault)
    setContent {
//            KeepScreenOn()
        Scaffold(
            timeText = {
                TimeText(
                    timeTextStyle = TimeTextDefaults
                        .timeTextStyle(fontSize = 8.sp)
                )
            },
        ) {
            RefereeScoreKeeperTheme {
                Watchface(gameViewModel)
            }
        }
    }
}

Watchface 实现代码 #

@Composable
fun Watchface(gameViewModel: GameViewModel) {
    val gameUiState by gameViewModel.uiState.collectAsState()

    Stopwatch()
    Column {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(.5f)
                .padding(bottom = 5.dp)
                .background(gameUiState.homeColor.copy(alpha = 0.2f))
        ) {
            TotalPointsBox(
                modifier = Modifier
                    .padding(vertical = 24.dp),
                totalPoints = gameUiState.totalHomeScore,
                diff = gameUiState.homeDiff
            )
            ScoreDisplayBox(
                text = gameUiState.homeScore,
                verticalAlignment = Alignment.BottomCenter
            )
            Row {
                ScoreActionBox(
                    modifier = Modifier
                        .weight(.5f)
                        .fillMaxHeight(),
                    subtractScore = { gameViewModel.onAction(ScoreAction.SubtractHomeGoal) },
                    addScore = { gameViewModel.onAction(ScoreAction.AddHomeGoal) },
                    shouldVibrate = gameUiState.hGoals != 0
                )
                ScoreActionBox(
                    modifier = Modifier
                        .weight(.5f)
                        .fillMaxHeight(),
                    subtractScore = { gameViewModel.onAction(ScoreAction.SubtractHomePoint) },
                    addScore = { gameViewModel.onAction(ScoreAction.AddHomePoint) },
                    shouldVibrate = gameUiState.hPoints != 0
                )
            }
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(.5f)
                .padding(top = 5.dp)
                .background(gameUiState.awayColor.copy(alpha = 0.2f))
        ) {
            TotalPointsBox(
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .padding(vertical = 20.dp),
                totalPoints = gameUiState.totalAwayScore,
                diff = gameUiState.awayDiff
            )
            ScoreDisplayBox(
                text = gameUiState.awayScore,
                verticalAlignment = Alignment.TopCenter
            )
            Row {
                ScoreActionBox(
                    modifier = Modifier
                        .weight(.5f)
                        .fillMaxHeight(),
                    subtractScore = { gameViewModel.onAction(ScoreAction.SubtractAwayGoal) },
                    addScore = { gameViewModel.onAction(ScoreAction.AddAwayGoal) },
                    shouldVibrate = gameUiState.aGoals != 0

                )
                ScoreActionBox(
                    modifier = Modifier
                        .weight(.5f)
                        .fillMaxHeight(),
                    subtractScore = { gameViewModel.onAction(ScoreAction.SubtractAwayPoint) },
                    addScore = { gameViewModel.onAction(ScoreAction.AddAwayPoint) },
                    shouldVibrate = gameUiState.aPoints != 0

                )
            }
        }
    }
}

解决方案 #

1. 后台线程执行文件IO，避免阻塞主线程 #

当前loadGameStateFromFile()在主线程同步读取文件，不仅会阻塞UI，还可能导致StateFlow更新时机晚于UI初始绘制。修改ViewModel的init方法，用viewModelScope在后台线程加载数据：

fun init(context: Context, gson: Gson) {
    this.context = context
    this.gson = gson

    viewModelScope.launch(Dispatchers.IO) {
        val loadedState = loadGameStateFromFile()
        withContext(Dispatchers.Main) {
            _uiState.value = loadedState
        }
    }
}

2. 确保GameState的相等性判断正确 #

Compose的重组依赖状态的相等性对比，如果GameState没有正确重写equals()和hashCode()，即使StateFlow更新了值，Compose也可能认为状态未变化，不触发重组。

必须把GameState定义为数据类，Kotlin数据类会自动生成正确的相等性判断逻辑：

data class GameState(
    // 你的属性定义，比如hPoints、aPoints等
)

如果无法用数据类，手动重写equals()和hashCode()方法，确保属性相同时返回true。

3. 优化ViewModel初始化方式（可选） #

去掉手动调用init的逻辑，用ViewModelFactory注入context和gson，让ViewModel创建时自动加载数据：

// 修改ViewModel
class GameViewModel(
    private val context: Context,
    private val gson: Gson
) : ViewModel() {

    private val _uiState = MutableStateFlow(GameState())
    val uiState: StateFlow<GameState> = _uiState.asStateFlow()

    private val fileName = "game_state.json"

    init {
        viewModelScope.launch(Dispatchers.IO) {
            val loadedState = loadGameStateFromFile()
            withContext(Dispatchers.Main) {
                _uiState.value = loadedState
            }
        }
    }

    // 其他方法不变...
}

// 实现ViewModelFactory
class GameViewModelFactory(
    private val context: Context,
    private val gson: Gson
) : ViewModelProvider.Factory {
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        if (modelClass.isAssignableFrom(GameViewModel::class.java)) {
            @Suppress("UNCHECKED_CAST")
            return GameViewModel(context, gson) as T
        }
        throw IllegalArgumentException("Unknown ViewModel class")
    }
}

// MainActivity中初始化ViewModel
val gameViewModel = ViewModelProvider(
    this,
    GameViewModelFactory(application, gson)
).get(GameViewModel::class.java)

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