如何为Jetpack Compose TextField设置默认/初始值？

背景 #

我正在研究如何为Jetpack Compose的TextField组件设置默认值，已找到几种解决方案，但希望了解Android社区最广泛认可的实现方式。

示例 #

假设你有如下ViewModel：

class UserProfileViewModel : ViewModel() {
    sealed class State {
        data class UserDataFetched(
            val firstName: String
            // ...
        ) : State()
        object ErrorFetchingData: State()
        object ErrorUpdatingData: State()
        object Loading: State()
        // ...
    }

    val state = MutableLiveData<State>()
    // ...
}

该ViewModel用于实现通过TextField更新用户名的UI，相关代码如下：

val state by viewModel.state.observeAsState(initial = UserProfileViewModel.State.Loading)
MaterialTheme() {
    UserProfileScreen(
        state = state
    )
}

@Composable
fun UserProfileScreen(
    state: UserProfileViewModel.State,
) {
    val userNameValue = remember { mutableStateOf(TextFieldValue()) }
    Column {
        TextField(
            value = userNameValue.value,
            onValueChange = {
                userNameValue.value = it
            }
        )
        //...
    }
}

现在，当首次展示该界面并获取到State.UserDataFetched事件时，我希望用返回的firstName预填充TextField。

现有方案分析 #

我已找到以下几种解决方案，但不确定哪种是最被广泛认可的及其原因：

#1 使用标记变量 #

@Composable
fun UserProfileScreen(
    state: UserProfileViewModel.State,
) {
    val userHasModifiedText = remember { mutableStateOf(false) }
    val userNameValue = remember { mutableStateOf(TextFieldValue()) }

    if (state is UserProfileViewModel.State.UserDataFetched) {
        if (!userHasModifiedText.value) {
            userNameValue.value = TextFieldValue(state.firstName)
        }
    }
    Column {
        TextField(
            value = userNameValue.value,
            onValueChange = {
                userNameValue.value = it
                userHasModifiedText.value = true
            }
        )
        //...
    }
}

思路是通过userHasModifiedText标记用户是否修改过TextField内容，避免重组时覆盖用户输入。

#2 使用derivedStateOf #

@Composable
fun UserProfileScreen(
    state: UserProfileViewModel.State,
    defaultFirstName: String? = null,
) {
    val userNameString = remember { mutableStateOf<String?>(null) }
    val userNameValue = remember {
        derivedStateOf {
            if (userNameString.value != null)
                TextFieldValue(userNameString.value ?: "")
            else
                TextFieldValue(defaultFirstName ?: "")
        }
    }

    Column {
        TextField(
            value = userNameValue.value,
            onValueChange = {
                userNameString.value = it.text
            }
        )
        //...
    }
}

注：修正了原代码中onValueChange的赋值错误，将it改为it.text以匹配String?类型的变量。

#3 使用LaunchedEffect #

@Composable
fun UserProfileScreen(
    state: UserProfileViewModel.State
) {
    val userNameValue = remember { mutableStateOf(TextFieldValue()) }
    LaunchedEffect(state) {
        if (state is UserProfileViewModel.State.UserDataFetched) {
            userNameValue.value = TextFieldValue(state.firstName)
        }
    }

    Column {
        TextField(
            value = userNameValue.value,
            onValueChange = {
                userNameValue.value = it
            }
        )
        //...
    }
}

注：修正了原代码的两处问题：将LaunchedEffect(true)改为监听state参数，确保状态更新时能重新触发；补全mutableStateOf(TextFieldValue)的括号，修正为mutableStateOf(TextFieldValue())。

#4 使用专属LiveData属性 #

假设不使用该sealed class，而是通过LiveData属性跟踪该字段：

class UserProfileViewModel : ViewModel() {
    // ...
    val firstName = MutableLiveData<String>()
    // ...
}

之后实现如下：

val firstName by viewModel.firstName.observeAsState("")
MaterialTheme() {
    UserProfileScreen(
        firstName = firstName,
        onFirstNameEditTextChanged = {
            viewModel.firstName.value = it
        }
    )
}

@Composable
fun UserProfileScreen(
    firstName: String,
    onFirstNameEditTextChanged: ((String) -> Unit) = {}
) {
    val userNameValue = remember { mutableStateOf(TextFieldValue(firstName)) }
    Column {
        TextField(
            value = userNameValue.value,
            onValueChange = {
                userNameValue.value = it
                onFirstNameEditTextChanged(it.text)
            }
        )
        //...
    }
}

注：修正了原代码中mutableStateOf(TextFieldValue)的语法错误，补全括号并传入初始值firstName。

说明 #

• 当前项目使用LiveData，暂无切换至State或Kotlin Flow的计划。

补充需求 #

我已列出所有找到的TextField默认值设置方案，若有更优方案或未提及的方案，欢迎分享并说明优势。

我认为“直接传入ViewModel”并非完整解决方案，例如当Composable用于Fragment且ViewModel作用域为Activity时，销毁Fragment后不希望TextField值被ViewModel保留。我更倾向于简洁、自包含的Composable实现，不希望过度绑定ViewModel。

我寻求Android社区广泛认可的清晰简洁方案，供团队采用。

预期效果：

• 打开界面时获取默认用户名并预填充TextField；
• 用户删除内容后保持为空；
• 关闭并重新打开界面时，重新获取值并预填充。

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