Jetpack Compose 通用加载微件：简单易用，优雅呈现

Android

2024-01-08 07:34:36

Jetpack Compose 通用加载微件的实现之路

微件的 UI 界面

首先，我们来设计微件的 UI 界面。我们希望微件能够在加载数据时显示一个转圈圈，加载完成后显示内容，加载失败后显示失败并可重新加载。以下是具体的设计方案：

加载中： 显示一个圆形的进度条，并带有「加载中...」的文本。
加载完成： 显示加载成功的内容，例如一个列表或一张图片。
加载失败： 显示「加载失败」的文本，并提供一个「重新加载」按钮。

实现逻辑

接下来，我们将实现微件的逻辑。我们使用 Compose 的 State 和 LaunchedEffect 来管理加载状态和数据。以下是详细的实现步骤：

定义一个 data 状态变量来存储加载的数据。
使用 LaunchedEffect 来发起数据加载。
在 LaunchedEffect 中使用协程来异步加载数据。
当数据加载完成后，将数据更新到 data 状态变量中。
根据 data 状态变量的值来显示不同的 UI 界面。

用法

现在，我们已经实现了通用加载微件，接下来就可以在您的项目中使用了。以下是如何使用它的示例代码：

@Composable
fun MyScreen() {
    val data = remember { mutableStateOf<Data?>(null) }

    LaunchedEffect(Unit) {
        data.value = loadData()
    }

    when (data.value) {
        is Loading -> CircularProgressIndicator()
        is Success -> MyContent(data.value.data)
        is Error -> ErrorView(data.value.error) {
            data.value = Loading
        }
    }
}