将ViewModel-LiveTata与JetPack组成-DEV365 开发者社区

在这篇文章中，我想介绍在JetPack组合屏幕上/如何在哪里/如何进行API调用。从本质上讲，传统的UI系统并组成并在何处调用远程/异步API和数据如何传递给我们。以下泳道图解释了数据流的概述。

正如我们在图中看到的那样，ViewModel和内层没有差异。换句话说，如果您将ViewModel与Android UI一起使用，则只有UI类会更改，其余层才能保持原样。

执行

在作曲中，Livedata被消耗为州。为此，在build.gradle中添加此依赖性。

// https://maven.google.com/web/index.html?q=livedata#androidx.compose.runtime:runtime-livedata
implementation "androidx.compose.runtime:runtime-livedata:$compose_version"

一次性电话

在可组合函数中，使用LiveData#observeAsState扩展名观察数据作为状态。

接下来，使用LaunchedEffect进行API调用 - 一次通话，使用Unit或任何常数作为键。

对于UI，像往常一样 - 浏览数据并构造UI。此示例显示列出书籍。

@Composable
fun BooksScreen(
    viewModel: BookListViewModel = hiltViewModel<BookListViewModelImpl>()
) {
    // State
    val books = viewModel.books.observeAsState()

    // API call
    LaunchedEffect(key1 = Unit) {
        viewModel.fetchBooks()
    }

    // UI
    LazyColumn(modifier = modifier) {
        items(books) {
            // List item composable
            BookListItem(book = it)
        }
    }
}

用户触发 - API调用

如果您想再次执行启动效果块 - 例如力刷新，请使用变量并有条件地更新key1值。请记住，每次关键更改时，都会调用API。因此，请记住不要分配渲染逻辑中的值并将其放在用户操作后面。

@Composable
fun BooksScreen(
    viewModel: BookListViewModel = hiltViewModel<BookListViewModelImpl>()
) {
    // State
    val books = viewModel.books.observeAsState()
    var refreshCount by remember { mutableStateOf(1) }

    // API call
    LaunchedEffect(key1 = refreshCount) {
        viewModel.fetchBooks()
    }

    // UI
    Column() {
        IconButton(onClick = {
                        refreshCounter++
                   }) {
                        Icon(Icons.Outlined.Refresh, "Refresh")
                   }
        LazyColumn(modifier = modifier) {
            items(books) {
                // List item composable
                BookListItem(book = it)
            }
        }
    }
}

几乎 - 就是这样！

我在UI框架之间切换时忽略了ViewModel和Repo实现。