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) )
本文作者:kingwzun
本文链接:https://www.cnblogs.com/kingwz/p/18325863
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
2022-07-26 树的DFS序