架构你的 Compose UI

在 Compose 中，UI 是不可变的——绘制后无法更新它。您可以控制的是 UI 的状态。每次 UI 的状态发生变化时，Compose 都会重新创建 UI 树中已更改的部分。 可组合项可以接受状态并公开事件——例如，一个TextField 接受一个值并公开一个回调onValueChange，该回调请求回调处理程序更改该值。

var name by remember { mutableStateOf("") }
OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") }
)
ArchitectureSnippets.kt

因为可组合项接受状态并公开事件，所以单向数据流模式非常适合 Jetpack Compose。本指南重点介绍如何在 Compose 中实现单向数据流模式，如何实现事件和状态持有者，以及如何在 Compose 中使用 ViewModel。

单向数据流

单向数据流 (UDF) 是一种设计模式，其中状态向下流动，事件向上流动。通过遵循单向数据流，您可以将显示 UI 中状态的可组合项与存储和更改状态的应用部分解耦。

使用单向数据流的应用的 UI 更新循环如下所示

  • 事件：UI 的一部分生成一个事件并将其向上传递，例如传递给 ViewModel 以进行处理的按钮点击；或者从应用的其他层传递事件，例如指示用户会话已过期。
  • 更新状态：事件处理程序可能会更改状态。
  • 显示状态：状态持有者向下传递状态，UI 显示它。

图 1. 单向数据流。

在使用 Jetpack Compose 时遵循此模式具有以下几个优点

  • 可测试性：将状态与显示它的 UI 解耦，使得更容易分别测试两者。
  • 状态封装：因为状态只能在一个地方更新，并且可组合项的状态只有一个真相来源，所以由于状态不一致而产生错误的可能性较小。
  • UI 一致性：通过使用可观察状态持有者（如StateFlow 或LiveData），所有状态更新都会立即反映在 UI 中。

Jetpack Compose 中的单向数据流

可组合项基于状态和事件工作。例如，只有当TextField 的value 参数更新时，它才会更新，并且它公开了一个onValueChange 回调——一个请求将值更改为新值的事件。Compose 将State 对象定义为值持有者，并且状态值的更改会触发可组合函数的重新组合。您可以将状态保存在remember { mutableStateOf(value) } 或rememberSaveable { mutableStateOf(value) 中，具体取决于需要记住该值的时间长短。

TextField 可组合项的值的类型是String，因此它可以来自任何地方——来自硬编码值、ViewModel 或从父可组合项传入。您不必将其保存在State 对象中，但是当调用onValueChange 时，您需要更新该值。

定义可组合参数

在定义可组合项的状态参数时，您应该记住以下问题

  • 可组合项的可重用性或灵活性如何？
  • 状态参数如何影响此可组合项的性能？

为了鼓励解耦和重用，每个可组合项应持有尽可能少的 信息。例如，当构建一个可组合项来保存新闻文章的标题时，最好只传入需要显示的信息，而不是整篇文章

@Composable
fun Header(title: String, subtitle: String) {
    // Recomposes when title or subtitle have changed.
}

@Composable
fun Header(news: News) {
    // Recomposes when a new instance of News is passed in.
}
ArchitectureSnippets.kt

有时，使用单个参数还可以提高性能——例如，如果News 包含的信息不仅仅是title 和subtitle，则每当将News 的新实例传入Header(news) 时，即使title 和subtitle 没有更改，可组合项也会重新组合。

仔细考虑传入的参数数量。具有过多参数的函数会降低函数的人体工程学特性，因此在这种情况下，最好将它们分组到一个类中。

Compose 中的事件

应用的每个输入都应表示为一个事件：点击、文本更改，甚至计时器或其他更新。由于这些事件会更改 UI 的状态，因此ViewModel 应该处理它们并更新 UI 状态。

UI 层绝不应在事件处理程序之外更改状态，因为这可能会在您的应用程序中引入不一致和错误。

最好为状态和事件处理程序 lambda 传递不可变值。这种方法具有以下优点

  • 您可以提高可重用性。
  • 您可以确保 UI 不会直接更改状态的值。
  • 您可以避免并发问题，因为您可以确保状态不会从另一个线程更改。
  • 通常，您可以降低代码复杂性。

例如，接受String 和 lambda 作为参数的可组合项可以从许多上下文中调用，并且具有很高的可重用性。假设您的应用中的顶部应用栏始终显示文本并具有后退按钮。您可以定义一个更通用的MyAppTopAppBar 可组合项，该项接收文本和后退按钮句柄作为参数

@Composable
fun MyAppTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
    TopAppBar(
        title = {
            Text(
                text = topAppBarText,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center)
            )
        },
        navigationIcon = {
            IconButton(onClick = onBackPressed) {
                Icon(
                    Icons.AutoMirrored.Filled.ArrowBack,
                    contentDescription = localizedString
                )
            }
        },
        // ...
    )
}
ArchitectureSnippets.kt

ViewModel、状态和事件：一个示例

通过使用ViewModel 和mutableStateOf，如果满足以下条件之一，您也可以在您的应用中引入单向数据流

  • UI 的状态通过可观察状态持有者（如StateFlow 或LiveData）公开。
  • ViewModel 处理来自 UI 或应用其他层的事件，并根据事件更新状态持有者。

例如，在实现登录屏幕时，点击登录按钮应导致您的应用显示进度微调器和网络调用。如果登录成功，则您的应用导航到不同的屏幕；如果发生错误，则应用显示 Snackbar。以下是您将如何建模屏幕状态和事件

屏幕有四种状态

  • 已注销：用户尚未登录时。
  • 进行中：您的应用当前正在尝试通过执行网络调用来登录用户时。
  • 错误：登录时发生错误。
  • 已登录：用户已登录时。

您可以将这些状态建模为一个密封类。ViewModel 将状态公开为State，设置初始状态，并根据需要更新状态。ViewModel 还通过公开onSignIn() 方法来处理登录事件。

class MyViewModel : ViewModel() {
    private val _uiState = mutableStateOf<UiState>(UiState.SignedOut)
    val uiState: State<UiState>
        get() = _uiState

    // ...
}
ArchitectureSnippets.kt

除了mutableStateOf API 之外，Compose 还提供扩展用于LiveData、Flow 和Observable 以注册为侦听器并将值表示为状态。

class MyViewModel : ViewModel() {
    private val _uiState = MutableLiveData<UiState>(UiState.SignedOut)
    val uiState: LiveData<UiState>
        get() = _uiState

    // ...
}

@Composable
fun MyComposable(viewModel: MyViewModel) {
    val uiState = viewModel.uiState.observeAsState()
    // ...
}
ArchitectureSnippets.kt

了解更多

要了解有关 Jetpack Compose 中架构的更多信息，请参阅以下资源

示例