Jetpack Compose中如何实现多页面可读写的多独立表单状态维护？

针对你描述的场景，在不修改模型层添加表单ID或新增仓库的前提下，有两种简单且可靠的实现方式：

1. 基于rememberSaveable+可序列化状态类的跨页状态传递 #

Compose的rememberSaveable可以在页面出栈、配置变化时保留状态，结合可序列化的状态类，就能实现子页面直接修改首屏的表单状态：

步骤示例： #

• 定义可序列化的表单字段状态类（实现Parcelable或Serializable）：

@Parcelize
data class FormFieldState(
    val text: MutableState<String> = mutableStateOf(""),
    val selectedOptions: MutableState<List<String>> = mutableStateOf(emptyList())
) : Parcelable

• 首屏维护表单状态列表：

val formStates = rememberSaveable {
    mutableStateListOf(
        FormFieldState(),
        FormFieldState()
        // 更多表单实例
    )
}

• 跳转子页面时，直接传递对应表单的状态实例：

// 假设点击第index个表单的字段
Button(onClick = {
    navController.navigate(
        "edit_field_screen",
        navOptions {
            arguments = bundleOf("field_state" to formStates[index])
        }
    )
}) {
    Text("修改字段")
}

• 子页面接收状态并直接修改：

@Composable
fun EditFieldScreen(navController: NavController) {
    val fieldState = navController.previousBackStackEntry
        ?.arguments
        ?.getParcelable<FormFieldState>("field_state") ?: return

    TextField(
        value = fieldState.text.value,
        onValueChange = { fieldState.text.value = it }
    )

    Button(onClick = { navController.popBackStack() }) {
        Text("返回")
    }
}

修改后状态会实时同步到首屏，返回后即可看到更新，且rememberSaveable会自动处理状态的持久化与恢复。

2. 绑定导航图的ViewModel共享状态 #

利用ViewModel的生命周期特性，将其绑定到首屏所在的导航图，在ViewModel中维护所有表单状态，子页面通过索引定位到对应表单状态进行修改：

步骤示例： #

• 定义ViewModel：

class FormViewModel : ViewModel() {
    // 用mutableStateList确保状态变化触发重组
    val formStates = mutableStateListOf<FormFieldState>()
}

• 首屏初始化ViewModel与表单状态：

val viewModel = viewModel<FormViewModel>()
// 仅初始化一次表单状态
LaunchedEffect(Unit) {
    viewModel.formStates.addAll(
        listOf(
            FormFieldState(),
            FormFieldState()
            // 更多表单实例
        )
    )
}

• 跳转时传递表单索引：

Button(onClick = {
    navController.navigate("edit_field_screen?index=$index")
}) {
    Text("修改字段")
}

• 子页面通过索引获取状态并修改：

@Composable
fun EditFieldScreen(navController: NavController) {
    val index = navController.previousBackStackEntry
        ?.arguments
        ?.getInt("index") ?: -1
    if (index == -1) return

    val viewModel = viewModel<FormViewModel>()
    val fieldState = viewModel.formStates[index]

    TextField(
        value = fieldState.text.value,
        onValueChange = { fieldState.text.value = it }
    )

    Button(onClick = { navController.popBackStack() }) {
        Text("返回")
    }
}

ViewModel的生命周期与导航图绑定，只要首屏属于该导航图，状态就不会被销毁，即使子页面跳转多层级，也能直接通过ViewModel访问并修改状态。

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