{"id":44,"title":"如何在Android Compose中管理复杂的状态","abstraction":"在Android Compose开发过程中，非常关键的一个任务是状态管理。我们需要维护App的状态，并且将状态传递给Compose去显示。这个过程跟Svelte、React很相似，框架规定好我们如何定义状态、如何变更状态，之后框架自动完成状态的检测、结果的呈现。","content":"

在Android Compose开发过程中，非常关键的一个任务是状态管理。我们需要维护App的状态，并且将状态传递给Compose去显示。这个过程跟Svelte、React很相似，框架规定好我们如何定义状态、如何变更状态，之后框架自动完成状态的检测、结果的呈现。

两类状态

Compose中的状态可以分为两大类，分别是UI元素状态和内容状态。

UI元素状态

指UI元素的一些属性，例如高度、颜色、位置、文字等，这类简单的状态通常可以Compose内部管理，例如一个简单的登录界面中，用户输入的账户、密码就属于简单的状态。

@Composable\nfun LoginForm(isLoading: Boolean, onLoginButton: (account: String, password: String) -> Unit) {\n    val account = remember { mutableStateOf(\"\") }\n    val password = remember { mutableStateOf(\"\") }\n\n    val onLoginClicked = {\n        onLoginButton(account.value, password.value)\n    }\n\n    Column(\n        modifier = Modifier.width(300.dp),\n        verticalArrangement = Arrangement.spacedBy(12.dp)\n    ) {\n\n        OutlinedTextField(\n            modifier = Modifier.fillMaxWidth(),\n            value = account.value,\n            onValueChange = {  account.value = it },\n            singleLine = true,\n            enabled = !isLoading,\n            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),\n            label = { Text(stringResource(R.string.login_account)) }\n        )\n\n        OutlinedTextField(\n            modifier = Modifier.fillMaxWidth(),\n            value = password.value,\n            enabled = !isLoading,\n            onValueChange = { password.value = it },\n            visualTransformation = PasswordVisualTransformation(),\n            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),\n            label = { Text(stringResource(R.string.login_password)) }\n        )\n\n        Button(\n            onClick = onLoginClicked,\n            modifier = Modifier.fillMaxWidth(),\n            enabled = !isLoading,\n            ) {\n            Text(stringResource(R.string.login_button))\n        }\n    }\n\n

这类简单的状态与其他Compose没有关联，与ViewModel也没有关联，因此适合在Compose内部管理。具体管理的方式就是使用rember函数，设置好初始状态，然后由其他代码修改这个状态。

内容状态

内容状态是指App界面中要显示的具体数据、内容，例如新闻列表、用户列表、用户昵称等信息，这类状态通常由ViewModel来管理，无法在Compose内部管理，因为这些状态需要配合复杂的数据获取、更新逻辑，例如HTTP请求、数据库访问等。例如：

class ConversationViewModel(\n    channelId: String,\n    messagesRepository: MessagesRepository\n) : ViewModel() {\n\n    val messages = messagesRepository\n        .getLatestMessages(channelId)\n        .stateIn(\n            scope = viewModelScope,\n            started = SharingStarted.WhileSubscribed(5_000),\n            initialValue = emptyList()\n        )\n\n    // Business logic\n    fun sendMessage(message: Message) { /* ... */ }\n}

状态再复杂一些

更复杂的UI状态

对于更复杂的UI状态，Google建议使用State Holder。这个State Holder 可以看作更为复杂的rember用户，使用这种方法将使得Compose内部的代码更为整洁，且状态管理相关的代码更为集中，易于阅读。下面是Google的一个代码示例：

@Composable\nfun rememberNiaAppState(\n    networkMonitor: NetworkMonitor,\n    userNewsResourceRepository: UserNewsResourceRepository,\n    timeZoneMonitor: TimeZoneMonitor,\n    coroutineScope: CoroutineScope = rememberCoroutineScope(),\n    navController: NavHostController = rememberNavController(),\n): NiaAppState {\n    NavigationTrackingSideEffect(navController)\n    return remember(\n        navController,\n        coroutineScope,\n        networkMonitor,\n        userNewsResourceRepository,\n        timeZoneMonitor,\n    ) {\n        NiaAppState(\n            navController = navController,\n            coroutineScope = coroutineScope,\n            networkMonitor = networkMonitor,\n            userNewsResourceRepository = userNewsResourceRepository,\n            timeZoneMonitor = timeZoneMonitor,\n        )\n    }\n}\n\nclass NiaAppState(......)

更复杂的内容状态

对于更复杂的内容状态，仍然由ViewModel来管理，建议定义一个单独的data class来管理所有状态，例如：

val _uiState = MutableStateFlow<BreedState>(BreedState())\nval uiState: StateFlow<BreedState> = _uiState\n\ndata class BreedState(\n    val breed: BreedDto = BreedDto(-1, 0, 0, 0, 0, \"\", null, null, \"\"),\n    val house: House = House(0, \"\", 0, HouseUsage.Female),\n    val lightInfo: BreedLightInfoDto = BreedLightInfoDto(0, 0),\n    val fertilizeInfo: BreedFertilizeInfoDto = BreedFertilizeInfoDto(0, 0),\n    val pregnantInfo: BreedPregnantInfoDto = BreedPregnantInfoDto(0, 0),\n    val bunnyInfoDto: BreedBunnyInfoDto = BreedBunnyInfoDto(0, 0),\n    val meatInfo: BreedMeatInfoDto = BreedMeatInfoDto(0, 0),\n    val birthInfo: BreedBirthInfoDto = BreedBirthInfoDto(0, 0),\n    val deathRecords: List<DeathRecordDto> = emptyList(),\n    val dropRecords: List<DropRecordDto> = emptyList(),\n    val pregnantRecords: List<PregnantRecordDto> = emptyList(),\n    val birthRecords: List<BirthRecordDto> = emptyList(),\n    val bunnyDeathRecords: List<BunnyDeathRecordDto> = emptyList(),\n    val isInitializing: Boolean = false,\n\n    val forageStocks: List<ForageStockStatDto> = emptyList(),\n    val breedForageRecords: List<BreedForageRecordDto> = emptyList(),\n    val drugStocks: List<DrugStockStatDto> = emptyList(),\n    val breedDrugRecords: List<BreedDrugRecordDto> = emptyList(),\n)

上面的方法需要注意的地方有：

当状态类内部嵌套有其他状态时，直接更改内部状态不会触发Recompose，即不会自动刷新数据
如果想让内部嵌套的状态变化触发Recompose，需要让内部嵌套的状态也是State类型，例如FlowState
或者，直接更新整个状态，也就是上面代码的方法，注意我们使用了data class，且内部所有属性都是val不可变数据
使用data class和val，结合Kotlin自动为data class生成的copy方法，我们可以非常方便地替换整个状态，同时更新某一个属性

// 更新状态中的某一个属性\n_uiState.update { it.copy(deathRecords = sorted) }

","user_id":1,"published":true,"created_at":1750149184953,"updated_at":1750160222871,"visits":0}