手把手教你搭建 Android MVI架构: MVI + kotlin + Flow

在现代 Android 开发中，MVI（Model-View-Intent）架构因其简单易懂、清晰的状态管理和响应式编程的特性而受到越来越多开发者的青睐。结合 Kotlin 和 Flow，我们可以更方便地实现响应式编程。本文将手把手教你如何搭建一个基于 Android 的 MVI 架构示例。

项目结构

在开始之前，我们先简单了解一下 MVI 架构的组成部分： 1. Model：表示应用的数据和业务逻辑。 2. View：用户界面，负责展示数据并处理用户的交互。 3. Intent：用户的意图或操作，表示用户对界面的请求。

1. 创建一个简单的 Android 项目

首先，使用 Android Studio 创建一个新的 Kotlin 项目，选择 Empty Activity 模板。

2. 添加依赖库

在 build.gradle 文件中添加 Kotlin Coroutines 和 Flow 的依赖：

dependencies {
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.2"
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0"
}

3. 定义 State 和 Intent

我们定义 UIState 和 UIIntent 来表示视图状态和用户意图。

sealed class UIState {
    object Loading : UIState()
    data class Success(val data: List<String>) : UIState()
    data class Error(val message: String) : UIState()
}

sealed class UIIntent {
    object LoadData : UIIntent()
}

4. 创建 ViewModel

在 ViewModel 中，我们将处理用户的意图，并更新 UI 状态。使用 StateFlow 来保持状态的响应。

class MainViewModel : ViewModel() {
    private val _state = MutableStateFlow<UIState>(UIState.Loading)
    val state: StateFlow<UIState> get() = _state

    fun intent(intent: UIIntent) {
        when (intent) {
            is UIIntent.LoadData -> loadData()
        }
    }

    private fun loadData() {
        viewModelScope.launch {
            _state.value = UIState.Loading
            try {
                // 模拟网络请求
                delay(2000)
                val data = listOf("Item 1", "Item 2", "Item 3")
                _state.value = UIState.Success(data)
            } catch (e: Exception) {
                _state.value = UIState.Error("加载失败")
            }
        }
    }
}

5. 创建 View

在 MainActivity 中，我们将观察状态并更新 UI。

class MainActivity : AppCompatActivity() {
    private lateinit var viewModel: MainViewModel
    private lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textView = findViewById(R.id.textView)
        viewModel = ViewModelProvider(this).get(MainViewModel::class.java)

        // 观察状态
        lifecycleScope.launchWhenStarted {
            viewModel.state.collect { state ->
                render(state)
            }
        }

        // 触发加载数据
        viewModel.intent(UIIntent.LoadData)
    }

    private fun render(state: UIState) {
        when (state) {
            is UIState.Loading -> {
                textView.text = "加载中..."
            }
            is UIState.Success -> {
                textView.text = state.data.joinToString(", ")
            }
            is UIState.Error -> {
                textView.text = state.message
            }
        }
    }
}

6. 布局文件

在 res/layout/activity_main.xml 中添加一个简单的 TextView 来展示结果：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

总结

通过以上步骤，我们已经成功搭建了一个简单的 MVI 架构的 Android 应用。我们定义了状态和意图，创建了 ViewModel 处理数据的加载，并在 UI 中实时更新界面。通过使用 Kotlin 的 Flow 和 Coroutines，我们可以以一种声明式的方式管理 UI 状态，使代码更易于理解和维护。希望这个简单的示例能够帮助你在实际项目中更好地应用 MVI 架构。