如何在Jetpack Compose中正确提升多个状态？

问题根源分析 #

• 输入框同步问题：你错误调用了两次UserProfile组件，且每个组件内部的两个输入框都绑定了同一个状态变量和回调函数，导致输入时所有框同步更新。
• 参数缺失报错：给UserProfile新增参数后，调用时未传递对应参数，触发编译错误。

修正后的代码实现 #

1. 优化UI组件（UserProfile）

调整组件参数，让它分别接收用户名和邮箱的独立状态及更新回调，确保每个输入框绑定专属状态：

@Composable
fun UserProfile(
    currentUsername: String,
    onUsernameChange: (String) -> Unit,
    currentEmail: String,
    onEmailChange: (String) -> Unit,
) { 
    // 用户名输入框
    Spacer(modifier = Modifier.height(20.dp))
    OutlinedTextField(
        value = currentUsername,
        onValueChange = onUsernameChange,
        label = { Text(text = "Name") },
        singleLine = true,
        leadingIcon = {
            Icon(
                imageVector = Icons.Default.Person,
                contentDescription = "用户名图标"
            )
        },
        modifier = Modifier.fillMaxWidth(0.8f),
    )

    // 邮箱输入框
    Spacer(modifier = Modifier.height(20.dp))
    OutlinedTextField(
        value = currentEmail,
        onValueChange = onEmailChange,
        label = { Text(text = "Email") },
        singleLine = true,
        leadingIcon = {
            Icon(
                imageVector = Icons.Default.Email,
                contentDescription = "邮箱图标"
            )
        },
        modifier = Modifier.fillMaxWidth(0.8f),
    )
}

2. 状态提升的父组件（UserProfileState）

仅调用一次UserProfile，分别传递用户名和邮箱的状态及回调：

@Composable
fun UserProfileState() {
    var username by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }

    UserProfile(
        currentUsername = username,
        onUsernameChange = { username = it },
        currentEmail = email,
        onEmailChange = { email = it }
    )
}

3. ViewModel托管状态（进阶方案）

若需在多组件间共享状态，推荐用ViewModel管理状态生命周期：

class UserProfileViewModel : ViewModel() {
    val username = mutableStateOf("")
    val email = mutableStateOf("")
}

@Composable
fun UserProfileState(viewModel: UserProfileViewModel = viewModel()) {
    UserProfile(
        currentUsername = viewModel.username.value,
        onUsernameChange = { viewModel.username.value = it },
        currentEmail = viewModel.email.value,
        onEmailChange = { viewModel.email.value = it }
    )
}

关键注意事项 #

• 每个输入框必须绑定独立的状态变量和对应更新回调，避免复用导致状态混乱。
• 调用子组件时必须传递所有声明的参数，否则会触发编译错误。
• 复杂场景优先使用ViewModel托管状态，确保状态生命周期与页面一致，且便于跨组件共享。

内容的提问来源于stack exchange，提问作者Josef M