前言

 在上一篇文章中我们构建了网络框架了，现在可以在页面中通过liveData的Observe回调中看到网络数据的返回。

正文

 Compose组件和Jetpack中其他的组件可以很有效的结合起来，会使我们的程序解耦的更彻底。下面来使用它们吧

一、添加依赖

添加依赖有两个部分，一个是Hilt的，一个是ViewModel。

① 添加Hilt依赖

 首先是在项目的build.gradle中，先定义Hilt的版本。

hilt_version = '2.38.1'

然后添加插件依赖：

dependencies {
        classpath "com.google.dagger:hilt-android-gradle-plugin:$hilt_version"
    }

添加位置如下图所示：

下面是在app的build.gradle中的配置：在顶部plugins{}闭包中添加：

id 'kotlin-kapt'
    id 'dagger.hilt.android.plugin'

这里增加hilt插件。然后在dependencies{}闭包中添加如下依赖：

implementation "com.google.dagger:hilt-android:$hilt_version"
    kapt "com.google.dagger:hilt-android-compiler:$hilt_version"

如下图所示：

至此我们Hilt依赖添加完毕。

②添加ViewModel依赖

下面我们添加ViewModel的依赖，其实主要就是对于在Compose使用ViewModel的增强，依赖如下：

implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.1"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.4.1"
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1"
    implementation "androidx.compose.runtime:runtime-livedata:$compose_version"

添加位置如下：

最后Sync Now，同步一下，然后你最好运行一下，先保证你添加的依赖没有问题，你再继续后面的开发比较好。

二、Hilt使用

 使用Hilt第一步就是添加@HiltAndroidApp注解，

这里的App类在上一篇文章中就已经写好了。然后我们定义EpidemicNewsRepository的作用域为@ViewModelScoped，并且注入。

定义了EpidemicNewsRepository在ViewModel中使用，下面在com.llw.goodnews包下新建viewmodel包，包下新建一个MainViewModel类，代码如下：

@HiltViewModel
class MainViewModel @Inject constructor(
    repository: EpidemicNewsRepository
) : ViewModel() {
    val result = repository.getEpidemicNews()
}

这里我们直接通过注入的方式在构造函数中传入EpidemicNewsRepository，然后通过repository去调用getEpidemicNews()函数，至此我们的ViewModel就写好了。

三、ViewModel使用

下面我们回到页面MainActivity中，创建一个initData函数

@Composable
fun initData(viewModel: MainViewModel = viewModel()) {
}

你会觉得很奇怪，这里说明一下，这里就是Compose和ViewModel的组合了，为什么这么说呢？

 因为我如果不加@Composable注解，它就不是一个可组合函数，就不能这么使用。只要是可组合函数都可以调用viewModel() 函数去获取ViewModel，而我们这里的就是MainViewModel，viewModel() 会返回一个现有的 ViewModel，或在给定作用域内创建一个新的 ViewModel。只要该作用域处于有效状态，就会保留 ViewModel。例如，如果在某个 Activity 中使用了可组合项，则在该 Activity 完成或进程终止之前，viewModel() 会返回同一实例。这里的作用域很重要，因为普通函数如果没有作用域的话是无法调用可组合函数。

四、数据流

Compose 随附了一些扩展程序，它们适用于最热门的基于流的 Android 解决方案。其中每个扩展程序都由不同的工件提供：

LiveData.observeAsState() 包含在 androidx.compose.runtime:runtime-livedata:$composeVersion 工件中。

组件注册为监听器，并将值表示为 State。每当发出一个新值时，Compose 都会重组界面中使用该 state.value 的部分。

val dataState = viewModel.result.observeAsState()

通过这个代码会执行网络请求，观察返数据状态，得到一个dataState，

dataState.value?.let {
        val orNull = it.getOrNull()
        if (orNull != null) {
            Greeting(name = orNull.msg)
        }
    }

每当 dataState 有改变时，都会执行.let函数体中的代码。

我们在页面中显示返回值，然后我们在setContent中调用initData()，这个网络数据返回再预览中是看不出来的，我们通过虚拟机去显示这个返回值。

下一篇文章中，我们将使用Compose显示UI数据。