Jetpack Compose 的新型架构 MVI使用详解
作者：艾维码 发布时间：2023-01-24 14:53:26
标签：Jetpack,Compose,架构,MVI
为什么是MVI而不是MVVM
MVVM作为流行的架构模式，应用在 Compose上，并没有大的问题或者设计缺陷。但是在使用期间，发现了并不适合我的地方，或者说是使用起来不顺手的地方：
数据观察者过多：如果界面有多个状态，就要多个 LiveData 或者 Flow，维护麻烦。
更新 UI 状态的来源过多：数据观察者多，并行或同时更新 UI,造成不必要的重绘。
大量订阅观察者函数，也没有约束：存储和更新没有分离，容易混乱，代码臃肿。
单向数据流
单向数据流 (UDF) 是一种设计模式，在该模式下状态向下流动，事件向上流动。通过采用单向数据流，您可以将在界面中显示状态的可组合项与应用中存储和更改状态的部分分离开来。
使用单向数据流的应用的界面更新循环如下所示：
事件：界面的某一部分生成一个事件，并将其向上传递，例如将按钮点击传递给 ViewModel 进行处理；或者从应用的其他层传递事件，如指示用户会话已过期。
更新状态：事件处理脚本可能会更改状态。
显示状态：状态容器向下传递状态，界面显示此状态。
以上是官方对单向数据流的介绍。下面介绍适合单项数据流的架构 MVI。
MVI
MVI 包含三部分，Model — View — Intent
Model 表示 UI 的状态，例如加载和数据。
View 根据状态展示对应 UI。
Intent 代表用户与 UI 交互时的意图。例如点击一个按钮提交数据。
可以看出 MVI 完美的符合官方推荐架构 ，我们引用 React Redux 的概念分而治之：
State 需要展示的状态，对应 UI 需要的数据。
Event 来自用户和系统的是事件，也可以说是命令。
Effect 单次状态，即不是持久状态，类似于 EventBus ,例如加载错误提示出错、或者跳转到登录页，它们只执行一次，通常在 Compose 的副作用中使用。
实现
首先我们需要约束类型的接口:
interface UiState
interface UiEvent
interface UiEffect
然后创建抽象的 ViewModel :
abstract class BaseViewModel< S : UiState, E : UiEvent,F : UiEffect> : ViewModel() {}
对于状态的处理，我们使用StateFlow，StateFlow就像LiveData但具有初始值,所以需要一个初始状态。这也是一种SharedFlow.我们总是希望在 UI 变得可见时接收最后一个视图状态。为什么不使用MutableState，因为Flow 的api和操作符十分强大。
private val initialState: S by lazy { initialState() }
protected abstract fun initialState(): S
private val _uiState: MutableStateFlow<S> by lazy { MutableStateFlow(initialState) }
val uiState: StateFlow<S> by lazy { _uiState }
对于意图，即事件，我要接收和处理：
private val _uiEvent: MutableSharedFlow<E> = MutableSharedFlow()
init {
subscribeEvents()
}
/**
* 收集事件
*/
private fun subscribeEvents() {
viewModelScope.launch {
_uiEvent.collect {
// reduce event
}
}
}
fun sendEvent(event: E) {
viewModelScope.launch {
_uiEvent.emit(event)
}
}
然后 Reducer 处理事件，更新状态：
/**
* 处理事件，更新状态
* @param state S
* @param event E
*/
private fun reduceEvent(state: S, event: E) {
viewModelScope.launch {
handleEvent(event, state)?.let { newState -> sendState { newState } }
}
}
protected abstract suspend fun handleEvent(event: E, state: S): S?
单一的副作用：
private val _uiEffect: MutableSharedFlow<F> = MutableSharedFlow()
val uiEffect: Flow<F> = _uiEffect
protected fun sendEffect(effect: F) {
viewModelScope.launch { _uiEffect.emit(effect) }
}
使用
接下来实现一个 Todo 应用，打开应用获取历史任务，点击加号增加一条新的任务，完成任务后后 Toast 提示。
首先分析都有哪些状态：
是否在加载历史任务
是否添加新任务
任务列表
创建约束类：
internal data class TodoState(
val isShowAddDialog: Boolean=false,
val isLoading: Boolean = false,
val goodsList: List<Todo> = listOf(),
) : UiState
然后分析有哪些意图：
加载任务（进入自动加载，所以省略）
显示任务
加载框的显示隐藏
添加新任务
完成任务
internal sealed interface TodoEvent : UiEvent {
data class ShowData(val items: List<Todo>) : TodoEvent
data class OnChangeDialogState(val show: Boolean) : TodoEvent
data class AddNewItem(val text: String) : TodoEvent
data class OnItemCheckedChanged(val index: Int, val isChecked: Boolean) : TodoEvent
}
而单一事件就一种，完成任务时候的提示：
internal sealed interface TodoEffect : UiEffect {
// 已完成
data class Completed(val text: String) : TodoEffect
}
界面
@OptIn(ExperimentalLifecycleComposeApi::class)
@Composable
internal fun TodoScreen(
viewModel: TodoViewModel = viewModel(),
) {
val state by viewModel.uiState.collectAsStateWithLifecycle()
val context = LocalContext.current
viewModel.collectSideEffect { effect ->
Log.e("", "TodoScreen: collectSideEffect")
when (effect) {
is TodoEffect.Completed -> Toast.makeText(context,
"${effect.text}已完成",
Toast.LENGTH_SHORT)
.show()
}
}
// LaunchedEffect(Unit) {
// viewModel.uiEffect.collect { effect ->
// Log.e("", "TodoScreen: LaunchedEffect")
//
// when (effect) {
// is TodoEffect.Completed -> Toast.makeText(context,
// "${effect.text}已完成",
// Toast.LENGTH_SHORT)
// .show()
// }
// }
// }
when {
state.isLoading -> ContentWithProgress()
state.goodsList.isNotEmpty() -> TodoListContent(
state.goodsList,
state.isShowAddDialog,
onItemCheckedChanged = { index, isChecked ->
viewModel.sendEvent(TodoEvent.OnItemCheckedChanged(index, isChecked))
},
onAddButtonClick = { viewModel.sendEvent(TodoEvent.OnChangeDialogState(true)) },
onDialogDismissClick = { viewModel.sendEvent(TodoEvent.OnChangeDialogState(false)) },
onDialogOkClick = { text -> viewModel.sendEvent(TodoEvent.AddNewItem(text)) },
)
}
}
@Composable
private fun TodoListContent(
todos: List<Todo>,
isShowAddDialog: Boolean,
onItemCheckedChanged: (Int, Boolean) -> Unit,
onAddButtonClick: () -> Unit,
onDialogDismissClick: () -> Unit,
onDialogOkClick: (String) -> Unit,
) {
Box {
LazyColumn(content = {
itemsIndexed(todos) { index, item ->
TodoListItem(item = item, onItemCheckedChanged, index)
if (index == todos.size - 1)
AddButton(onAddButtonClick)
}
})
if (isShowAddDialog) {
AddNewItemDialog(onDialogDismissClick, onDialogOkClick)
}
}
}
@Composable
private fun AddButton(
onAddButtonClick: () -> Unit,
) {
Box(modifier = Modifier.fillMaxWidth()) {
Icon(imageVector = Icons.Default.Add,
contentDescription = null,
modifier = Modifier
.size(40.dp)
.align(Alignment.Center)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null,
onClick = onAddButtonClick
))
}
}
@Composable
private fun AddNewItemDialog(
onDialogDismissClick: () -> Unit,
onDialogOkClick: (String) -> Unit,
) {
var text by remember { mutableStateOf("") }
AlertDialog(onDismissRequest = { },
text = {
TextField(
value = text,
onValueChange = { newText ->
text = newText
},
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Blue,
disabledIndicatorColor = Color.Blue,
unfocusedIndicatorColor = Color.Blue,
backgroundColor = Color.LightGray,
)
)
},
confirmButton = {
Button(
onClick = { onDialogOkClick(text) },
colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue)
) {
Text(text = "Ok", style = TextStyle(color = Color.White, fontSize = 12.sp))
}
}, dismissButton = {
Button(
onClick = onDialogDismissClick,
colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue)
) {
Text(text = "Cancel", style = TextStyle(color = Color.White, fontSize = 12.sp))
}
}
)
}
@Composable
private fun TodoListItem(
item: Todo,
onItemCheckedChanged: (Int, Boolean) -> Unit,
index: Int,
) {
Row(
modifier = Modifier.padding(16.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(
colors = CheckboxDefaults.colors(Color.Blue),
checked = item.isChecked,
onCheckedChange = {
onItemCheckedChanged(index, !item.isChecked)
}
)
Text(
text = item.text,
modifier = Modifier.padding(start = 16.dp),
textDecoration = if (item.isChecked) TextDecoration.LineThrough else TextDecoration.None,
style = TextStyle(
color = Color.Black,
fontSize = 14.sp
)
)
}
}
@Composable
private fun ContentWithProgress() {
Surface(color = Color.LightGray) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
CircularProgressIndicator()
}
}
}
ViewModel
internal class TodoViewModel :
BaseViewModel<TodoState, TodoEvent, TodoEffect>() {
private val repository: TodoRepository = TodoRepository()
init {
getTodo()
}
private fun getTodo() {
viewModelScope.launch {
val goodsList = repository.getTodoList()
sendEvent(TodoEvent.ShowData(goodsList))
}
}
override fun initialState(): TodoState = TodoState(isLoading = true)
override suspend fun handleEvent(event: TodoEvent, state: TodoState): TodoState? {
return when (event) {
is TodoEvent.AddNewItem -> {
val newList = state.goodsList.toMutableList()
newList.add(
index = state.goodsList.size,
element = Todo(false, event.text),
)
state.copy(
goodsList = newList,
isShowAddDialog = false
)
}
is TodoEvent.OnChangeDialogState -> state.copy(
isShowAddDialog = event.show
)
is TodoEvent.OnItemCheckedChanged -> {
val newList = state.goodsList.toMutableList()
newList[event.index] = newList[event.index].copy(isChecked = event.isChecked)
if (event.isChecked) {
sendEffect(TodoEffect.Completed(newList[event.index].text))
}
state.copy(goodsList = newList)
}
is TodoEvent.ShowData -> state.copy(isLoading = false, goodsList = event.items)
}
}
}
优化
本来单次事件在LaunchedEffect里加载，但是会出现在 UI 在停止状态下依然收集新事件，并且每次写LaunchedEffect比较麻烦，所以写了一个扩展：
@Composable
fun <S : UiState, E : UiEvent, F : UiEffect> BaseViewModel<S, E, F>.collectSideEffect(
lifecycleState: Lifecycle.State = Lifecycle.State.STARTED,
sideEffect: (suspend (sideEffect: F) -> Unit),
) {
val sideEffectFlow = this.uiEffect
val lifecycleOwner = LocalLifecycleOwner.current
LaunchedEffect(sideEffectFlow, lifecycleOwner) {
lifecycleOwner.lifecycle.repeatOnLifecycle(lifecycleState) {
sideEffectFlow.collect { sideEffect(it) }
}
}
}
来源：https://juejin.cn/post/7145119508162674719
0
投稿猜你喜欢
- 本文实例讲述了Android编程之ActionBar Tabs用法。分享给大家供大家参考，具体如下：这里主要实现用Tab切换不同的Fragm
- 1.所有流程的起点是从拨号后按下拨号键开始，此步的代码在/android sourcecode/packages/Contacts/src/
Java中字符串中子串的查找共有四种方法(indexof()) indexOf 方法返回一个整数值，指出 String 对象内子字符串的开始- Java2在1.4中新增了一个关键字：assert。在程序开发过程中使用它创建一个断言(assertion)。，它的语法形式有如下所示的两种
- 对谷歌地图操作使用的是WebBrowser控件，通过对javascript的操作来实现对谷歌地图的各种操作，所以首先要创建一个html文件，
- Logback TurboFilter实现日志级别等内容的动态修改可能看到这个标题，读者会问：要修改日志的级别，不是直接修改log.xxx就
- Android OnCreate()中获取控件高度与宽度试过在OnCreate（）中获取控件高度与宽度的童鞋都知道，getWidth()与g
- 一、引入其实之前一直以为像饿了么或者是美团外卖那种把商品添加到购物车的动画会很难做，但是实际做起来好像并没有想象中的那么难哈哈。布局主要使用
- 使用JDBC时，我们都会很自然得使用下列语句：Class.forName("com.mysql.jdbc.Driver"
- 通过Class对象获取对象的方式是通过class.newInstance()方式获取，通过调用默认构造参数实例化一个对象。/** * Cre
- 在我们的程序设计中，我们经常要加密一些特殊的内容，今天总结了几个简单的加密方法，分享给大家！如何用JAVA实现字符串简单加密解密？为保证用户
- 文件上传是网站非常常用的功能，直接使用Servlet获取上传文件还得解析请求参数，比较麻烦，所以一般选择采用apache的开源工具，comm
- 前言最学习动态规划思想的路上，遇见了‘分割回文串问题'，如临大敌啊，题目听起来蛮简单，思考起来却也没那么容易，比解决问题更头疼的是如
- kafka是什么？Kafka是由Apache软件基金会开发的一个开源流处理平台，由Scala和Java编写。Kafka是一种高吞吐量的分布式
- 一 介绍本节给知识追寻者给大家带来的是springSecurity入门篇，主要是简述下springSecrurity的启动原理和简单的入门搭
- 一、 通过JDK网络类Java.net.HttpURLConnection1.java.net包下的原生java api提供的http请求使
- SSL是为网络通信提供安全以及保证数据完整性的的一种安全协议，SSL在网络传输层对网络连接进行加密。例：cas 的单点登陆就用到了SSL一、
- 思路分析：要逆序遍历某个列表，首先要获得一个ListIterator对象，利用for()循环，以ListIterator类的hasNext(
- StringBuilder在高性能场景下的正确用法关于StringBuilder，一般同学只简单记住了，字符串拼接要用StringBuild
- 类加载器类加载器作用负责将.class文件（存储的物理文件）加载到内存中类加载器过程加载：通过全类名获取这个类准备用流传输，加载进内存，加载
