简介
双向绑定 说白了就是达到下面的效果:
- ViewModel 能够实时传输 从Room数据库查询到的数据 到 Compose页面。
- Compose页面 能实时传输 用户输入的数据 到 ViewModel 类。
需要分别在ViewModel和Compose中操作。
一、在ViewModel中:
1、使用mutableStateOf家族定义一个可变的值(这个值可以用于界面显示)
// 用于单个值
val mutableStateInModel = mutableStateOf("")
// 用于序列/数组
val mutableStateListInModel = mutableStateListOf<Any>()
解释:
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)
)
标签:Compose,mutableStateListInModel,ViewModel,mutableStateInModel,mutableStateOf,And
From: https://www.cnblogs.com/kingwz/p/18325863