如何将Compose函数内的表单值存入DataStore？

核心思路是利用Compose的状态提升原则——把需要跨组件共享的状态从子Composable移到父组件（或ViewModel），子组件仅负责UI渲染和回调通知状态变化，这样父组件的保存按钮就能统一获取所有字段的值。

1. 改造独立表单字段Composable #

将子组件改为受控组件，接收外部传入的状态值和状态变化回调，不再内部维护状态：

@Composable
fun PatientNameField(
    value: String,
    onValueChange: (String) -> Unit
) {
    OutlinedTextField(
        value = value,
        label = { Text(text = "Name") },
        onValueChange = onValueChange
    )
}

如果需要处理光标、选中文本等高级需求，可以将String替换为TextFieldValue，参数对应调整即可。

2. 父组件统一管理状态 #

在Screen1中定义所有表单字段的状态，传递给对应的子组件，保存时统一收集状态值存入DataStore：

@Composable
fun Screen1(navController: NavController) {
    val context = LocalContext.current 
    val scope = rememberCoroutineScope()
    val dataStoreName = StoreName(context)
    val savedName = dataStoreName.getValue.collectAsState(initial = "")

    // 统一管理所有表单字段的状态
    val patientName = remember { mutableStateOf("") }
    // 示例：添加其他字段的状态
    val patientAge = remember { mutableStateOf("") }

    Column { 
        Button(
            onClick = {
                scope.launch {
                    // 保存当前表单的所有字段值
                    dataStoreName.saveValue(patientName.value)
                    // 若有其他字段，比如年龄：dataStoreAge.saveValue(patientAge.value)
                }
                navController.navigate(Screen.Screen2.route) 
            }
        ) {
            Text(text = "Save & Next")
        }

        // 传递状态和回调给子组件
        PatientNameField(
            value = patientName.value,
            onValueChange = { patientName.value = it }
        )
        // 示例：其他字段组件
        // PatientAgeField(
        //     value = patientAge.value,
        //     onValueChange = { patientAge.value = it }
        // )

        Text(text = "Current information stored: " + savedName.value)
    }
}

3. 进阶：用ViewModel管理复杂表单 #

当表单字段较多时，父组件状态会过于臃肿，推荐用ViewModel统一管理状态和DataStore交互，同时利用ViewModel的生命周期特性避免状态丢失：

第一步：创建ViewModel #

class FormViewModel(context: Context) : ViewModel() {
    private val dataStoreName = StoreName(context)
    // 将DataFlow转为LiveData，方便Compose观察
    val savedName = dataStoreName.getValue.asLiveData()

    // 表单状态集合
    val patientName = mutableStateOf("")
    val patientAge = mutableStateOf("")

    // 统一处理表单保存逻辑
    fun saveForm() {
        viewModelScope.launch {
            dataStoreName.saveValue(patientName.value)
            // 保存其他字段逻辑
        }
    }
}

第二步：在Screen1中使用ViewModel #

@Composable
fun Screen1(navController: NavController) {
    // 初始化ViewModel
    val viewModel: FormViewModel = viewModel(factory = object : ViewModelProvider.Factory {
        override fun <T : ViewModel> create(modelClass: Class<T>): T {
            @Suppress("UNCHECKED_CAST")
            return FormViewModel(LocalContext.current.applicationContext) as T
        }
    })
    val savedName by viewModel.savedName.observeAsState(initial = "")

    Column { 
        Button(
            onClick = {
                viewModel.saveForm()
                navController.navigate(Screen.Screen2.route) 
            }
        ) {
            Text(text = "Save & Next")
        }

        PatientNameField(
            value = viewModel.patientName.value,
            onValueChange = { viewModel.patientName.value = it }
        )

        Text(text = "Current information stored: " + savedName)
    }
}

这种方式既实现了状态的跨组件共享，又遵循了Compose单向数据流的设计原则，同时让代码结构更清晰，易于维护。

内容的提问来源于stack exchange，提问作者Aletta Karsies van Eeden