Android笔记（二十四）基于Compose组件的MVVM模式和MVI模式的实现

仔细研究了一下MVI(Model-View-Intent)模式，发现它和MVVM模式非常的相识。在采用Android JetPack Compose组件下，MVI模式的实现和MVVM模式的实现非常的类似，都需要借助ViewModel实现业务逻辑和视图数据和状态的传递。在这篇文章中，将通过简单的货币兑换实例来展示一下MVVM模式和MVI模式的不同。

一、MVVM模式

图1 MVVM模式架构
在MVVM模式中：
M：表示Model，即数据域模型。数据模型中的数据通过视图模型传递给视图，从而更新视图的界面；
V: 表示View,即视图，可以看到的界面；从视图界面中将输入的数据发送给视图模型，视图模型执行业务逻辑，完成某些业务功能。
VM:表示ViewModel，即视图模型，是业务的实际的处理者。它承担着中介的作用，它一方面将数据模型传递给界面，使得界面发生刷新；另一方面，将视图中的数据传递发送给Model数据模型，为后续的业务处理提供数据。在MVVM模式中是双向的数据绑定的。在Android Compose组件定义界面的过程中，往往是数据单向流动的。因此在结合Compose组件实现MVVM模式时，处理与DataBinding组件实现双向绑定是有些不同的。下面通过中美货币兑换应用实例来说明：
1.1 定义数据模型

/*** @property type String：货币转换类别，例如RMB->USD，或USD->RMB* @property moneny Float：要转换的钱数* @property rate Float：转换汇率* @constructor*/
data class Currency(var type:String="RMB->USD",var money:Float=0.0f,var rate:Float=0.14f)

1.2 定义视图模型CurrencyViewModel.kt
CurrencyViewModel类是ViewModel的子类，定义核心业务，即修改界面的状态数据和兑换货币业务处理，代码如下：

class CurrencyViewModel: ViewModel() {private var currency = Currency()//要处理的数据private var _result: MutableStateFlow<String> =  MutableStateFlow("")//视图模型内部调用val result:StateFlow<String> = _result.asStateFlow()//单向数据流提供给视图fun updateUI(type:String,money:Float){//修改数据if(type == "USD->RMB")currency.rate = 7.07felse if(type == "RMB->USD")currency.rate = 0.14fcurrency.type = typecurrency.money = money}fun convert() {//兑换货币_result.value  ="${currency.money*currency.rate}"}
}

1.3 定义视图CurrencyScreen
CurrencyScreen是可组合函数，由多个可组合项构成，代码如下：

@Composable
fun CurrencyScreen(modifier: Modifier, viewModel:CurrencyViewModel) {val expandState = remember{ mutableStateOf(false) }//控制下拉列表的状态val types = listOf("","CNY->USD","USD->RMB")//定义货币兑换的所有类别var type by remember{ mutableStateOf("") }  //定义兑换类别var money by remember { mutableFloatStateOf(0.0f) }//定义要兑换的钱数val result = viewModel.result.collectAsState()//获取结果状态Column(modifier=modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally){Text("货币兑换简单应用",fontSize = 32.sp)//输入钱数的文本框OutlinedTextField(modifier = Modifier.size(300.dp,60.dp),label = {//提示Text("要兑换的钱数：")},value = "${money}",onValueChange = {it:String->money = it.toFloat()})//自定义下拉列表，控制类别Row(modifier = Modifier.size(300.dp,60.dp)){OutlinedTextField(value = "$type", onValueChange = {}, readOnly = true)//不可编辑DropdownMenu(expanded = expandState.value ,onDismissRequest = {expandState.value = false}) {types.forEach {it:String->DropdownMenuItem(text = {Text(it)}, onClick = {type = it           //修改兑换类别expandState.value = false//关闭下拉列表框})}}IconButton(onClick={expandState.value = !expandState.valueviewModel.updateUI(type,money)}) {Icon(Icons.Filled.PlayArrow, contentDescription = "下拉图标")}}//兑换按钮Button(onClick={viewModel.convert()                   //执行货币转换}){Text("货币转换")}//显示结果if(type.isNotBlank())Text("$type：${result.value}",fontSize = 30.sp)}
}

1.4 定义MainActivity
MainActivity调用上述的界面可组合函数CurrencyScreen和创建视图模型CurrencyViewModel对象，代码如下：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)enableEdgeToEdge()val viewModel = ViewModelProvider(this).get(CurrencyViewModel::class.java)//创建视图模型对象setContent {Ch03_DemoTheme {Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->CurrencyScreen(modifier = Modifier.padding(innerPadding),viewModel =viewModel )//调用可组合函数，生成界面}}}}
}

运行结果如图2所示：

图2

二、MVI模式

图3 MVI模式架构
Model: 与MVVM中的Model不同的是，MVI的Model主要指UI状态（State）。例如页面加载状态、控件位置等都是一种UI状态。
View: 与其他MVX中的View一致，可能是一个Activity或者任意UI承载单元。MVI中的View通过订阅Model的变化实现界面刷新。
Intent: 此Intent不是Activity的Intent，用户的任何操作都被包装成Intent后发送给Model层进行数据请求；
下面仍以货币兑换为例进行介绍。

2.1 定义模型

/*** @property operator String:操作的类别* @property rmb Double：人民币* @property rate Double：汇率* @property usd Double：美元* @constructor*/
data class CurrencyState(var operator:String="None",var rmb:Double=0.0,val rate:Double=1.0,var usd:Double=0.0)

2.2 定义意图

在本应用中有两个意图，刷新输入界面和兑换货币，因此定义密封类CurrencyIntent，两个子类ConvertToRMBIntent和ConvertToUSDIntent，分别对应兑换成人民币操作和兑换成美元的操作，并通过意图传递参数，代码如下：

sealed class CurrencyIntent {data class ConvertToRMBIntent(val operator:String,val usd:Double,val rate:Double):CurrencyIntent()data class ConvertToUSDIntent(val operator:String,val rmb:Double,val rate:Double):CurrencyIntent()
}

2.3 定义视图模型

class CurrencyViewModel: ViewModel() {private val _state = MutableStateFlow(CurrencyState())val output = _state.asStateFlow()fun processIntents(intent: CurrencyIntent){//根据意图类型的不同处理意图val currentState = _state.valuewhen(intent){is CurrencyIntent.ConvertToRMBIntent->{val newState = currentState.copy(operator=intent.operator,usd =intent.usd,rate = intent.rate)newState.rmb = convertToRMB(newState.usd,newState.rate)//执行兑换_state.value = newState//修改状态}is CurrencyIntent.ConvertToUSDIntent->{val newState = currentState.copy(operator=intent.operator,rmb=intent.rmb,rate = intent.rate)newState.usd = convertToUSD(newState.rmb,newState.rate)//执行兑换_state.value = newState//修改状态}}}private fun convertToUSD(rmb:Double,rate:Double):Double = rmb*rateprivate fun convertToRMB(usd:Double,rate:Double):Double = usd*rate
}

2.4 定义视图

在视图部分，将处理输入的界面单独定义成CurrencyView，代码如下：

@Composable
fun CurrencyView(modifier:Modifier,onReceivedIntent:(CurrencyIntent)->Unit){var expand by remember{mutableStateOf(false)}var inputState by remember{mutableStateOf(0.0)}var operator by remember{mutableStateOf("None")}val operators = listOf("None","CNY->USD","USD->CNY")Column(modifier = modifier.fillMaxWidth().wrapContentSize().padding(10.dp)){Column(horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement =  Arrangement.Center){Row{OutlinedTextField(value="$inputState",onValueChange = {it:String->inputState = it.toDouble()},label = {Text("输入货币",fontSize=20.sp)})}Row{OutlinedTextField(value = "$operator", onValueChange = {})IconButton(onClick={expand = !expand}){Icon(Icons.Filled.ArrowDropDown, contentDescription = "下拉按钮",tint= Color.Green)}DropdownMenu(expanded = expand, onDismissRequest = {expand = false}) {operators.forEach {it:String->DropdownMenuItem(text = {Text(it,fontSize = 24.sp)}, onClick = {if(it=="USD->CNY"){operator ="USD->CNY"onReceivedIntent(CurrencyIntent.ConvertToRMBIntent("USD->CNY",inputState,7.1))expand = false}else if(it=="CNY->USD"){operator = "CNY->USD"onReceivedIntent(CurrencyIntent.ConvertToUSDIntent("CNY->USD",inputState,0.14))expand = false}})}}}}}
}

然后将输入数据的界面CurrencyView在CurrencyScreen调用，并在CurrencyScreen增加兑换的输出结果显示，代码如下：

@Composable
fun CurrencyScreen(modifier:Modifier,viewModel:CurrencyViewModel){val state = viewModel.output.collectAsState()Column(modifier = modifier){CurrencyView(modifier){viewModel.processIntents(it) //处理意图}//显示兑换结果if(state.value.operator=="USD->CNY") Text("$ ${state.value.usd} 美元=￥ ${state.value.rmb} 人民币",fontSize=24.sp)else if(state.value.operator=="CNY->USD")Text("￥ ${state.value.rmb} 人民币=$ ${state.value.usd} 美元",fontSize=24.sp)}
}

2.5 定义MainActivity

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)enableEdgeToEdge()val viewModel: CurrencyViewModel = ViewModelProvider(this).get(CurrencyViewModel::class.java)setContent {Ch03_DemoTheme {Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->CurrencyScreen(modifier=Modifier.padding(innerPadding),viewModel = viewModel)}}}}
}

运行结果如图4所示：

图4

参考文献

Android应用架构的未来：深入理解MVI模式及其优势 https://cloud.tencent.com/developer/article/2394218