Jetpack Compose onResume 后视图部分消失问题详解

2024-03-01 07:00:40

Jetpack Compose 中 onResume 后视图部分消失的真相

引言

在 Jetpack Compose 中构建 Android 应用程序时，开发人员可能会遇到一个令人困惑的问题：在应用程序启动后，所有视图元素正常显示，但当应用程序切换到后台并重新启动时，某些视图元素会神秘地消失。本文深入探讨导致此问题的根源，并提供可行的解决方案。

根本原因

要理解这个问题，我们首先需要了解 Compose 的工作原理。Compose 使用可组合函数来构建用户界面。可组合函数是一种函数，接收输入并返回如何绘制视图的声明。

当应用程序首次启动时，Compose 会调用你的主可组合函数，该函数了整个用户界面。Compose 然后将此声明转换为一个视图树，该视图树最终在屏幕上渲染。

然而，当应用程序切换到后台时，Android 系统会暂停其执行。当应用程序从后台恢复时，Android 系统会调用 onResume 方法。在 onResume 方法中，Compose 会再次调用你的主可组合函数，以重新创建视图树。

问题在于，在 onResume 调用期间，Compose 无法访问 scrollState。这是因为 scrollState 存储在 CompositionLocal 对象中，而 CompositionLocal 在应用程序暂停时不会保留。结果，在 onResume 期间创建的视图树不包含 scrollState，这会导致 scrollState 依赖的所有视图元素消失。

解决方案：`rememberScrollState`

解决此问题的关键是使用 rememberScrollState 函数。rememberScrollState 函数创建一个 CompositionLocal 对象，其中包含 scrollState。然后，你可以将 rememberScrollState 的返回值传递给 verticalScroll 修饰符：

val scrollState = rememberScrollState()

Column(
  modifier = Modifier
    .fillMaxWidth()
    .fillMaxHeight()
    .padding(innerPadding)
    .verticalScroll(scrollState),
  horizontalAlignment = Alignment.Start,
) {
  //after this line all become invisible
  Row(){} //become invisible
}

通过这种方式，当应用程序从后台恢复时，Compose 能够访问 scrollState 并正确重新创建视图树。