Android 将 ViewModel 和 Compose界面的数据 双向绑定
简介
双向绑定 说白了就是达到下面的效果：
- ViewModel 能够实时传输 从Room数据库查询到的数据 到 Compose页面。
- Compose页面 能实时传输 用户输入的数据 到 ViewModel 类。
注意：教程只适用于Compose页面用户，如果还是传统xml开发 参考官方教程：7. 将 LiveData 与数据绑定搭配使用 ，实现类似效果。
需要分别在ViewModel和Compose中操作。
一、在ViewModel中：
1、使用mutableStateOf家族定义一个可变的值（这个值可以用于界面显示）
// 用于单个值（可以是任何对象）
val mutableStateInModel = mutableStateOf("")
// 用于序列/数组
val mutableStateListInModel = mutableStateListOf<Any>()
//还有哈希的形式的，方法参数带vararg关键字
val mutableStateMapInModel = mutableStateMapOf<XXX>()
⚠️注意： 使用mutableStateListOf时候，如果发现数据更改没有显示到Compose页面，可以使用 copy 更改它，使其反馈到页面,例如childTravellersList[index] = childTravellersList[index].copy(error = true)。
因为mutableStateListOf只能通知添加/删除/替换列表中的某些元素。当您更改列表中的任何类时，可变状态无法知道它。
解释：
mutableStateOf家族定义的数据自带了通知界面 重新绘制 的功能，如果需要实现实时更新界面数据的功能时，可以使用这个mutableStateOf方法来定义 数据源。
- 如果需要界面显示的值更新，直接改变这个“可变状态” 的 value值即可。
mutableStateInModel.value = data.toString()
二、在Compose页面中：
compose中有两个方法，按照自己喜欢选用其中一个就行 / 哪个一个在具体场景遇到问题就换另一个。
方法1
直接在具体的Compose组件中使用 在ViewModel使用mutableStateOf家族定义的可变值，就可以，如下面例子：
@Composable
OutlinedTextField(
value = xxxxxViewModel.mutableStateListInModel[index].toString(),
onValueChange = {
xxxxxViewModel.mutableStateListInModel[index]= it
},
label = { Text("label") },
)
方法2
- 使用by remenber创建View中显示的数据。
val mutableValueInView by remember{
viewModel.mutableStateInModel
}
使用by remember，将ViewModel中的数据关联到View中的变量。
- 在具体的Text中使用这个可以实时更新的值。
Text(
text = mutableValueInView,
Modifier.height(20.dp)
)
