安卓Compose实现鱼骨加载中效果

安卓如何实现如下图类似鱼骨加载中效果

我们需要使用compose-shimmer，添加依赖 (build.gradle)
implementation("com.valentinilk.shimmer:compose-shimmer:1.3.2")

最新的版本号可以参见 https://github.com/valentinilk/compose-shimmer

定义一个状态类 UiState 用于管理加载状态和数据：

data class UiState(
    val isLoading: Boolean = true, // 控制是否处于加载状态
    val data: List<Order> = emptyList() // 实际数据列表
) : IState

UiState 包含了 isLoading 布尔值来指示当前是否正在加载数据，以及 data 列表来存储实际的订单数据。当 isLoading 为 true 时，UI 将显示占位符（鱼骨效果），否则显示实际数据。

在 LazyColumn 中根据 UiState 的 isLoading 状态来显示不同的内容：

当 isLoading 为 true 时，我们渲染固定数量的占位符（这里是5个），并传入空的字符串作为占位内容。这些占位符将通过 OrderItemView 应用鱼骨加载效果。

当 isLoading 为 false 时，我们渲染实际的 viewState.data 中的数据。

LazyColumn(
    modifier = Modifier.padding(horizontal = 16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    if (viewState.isLoading) {
        items(5) { index ->
            // 传入空的字符占位
            OrderItemView(
                order = Order(
                    type = "              ",
                    status = "          ",
                    time = "                                   ",
                    startAddress = "                                        ",
                    endAddress = "                                         "
                ),
                viewState = viewState
            )
        }
    } else {
        items(viewState.data.size) { index ->
            OrderItemView(
                order = viewState.data[index],
                viewState = viewState
            )
        }
    }
}

OrderItemView 的部分参考实现如下：

OrderItemView 是一个可组合函数，它根据 viewState.isLoading 的值来决定是显示鱼骨加载效果还是实际的订单信息。关键在于 Modifier.shimmer() 的应用。

@Composable
fun OrderItemView(order: Order, viewState: UiState) {
    // 通过 viewState.isLoading 控制显示
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 10.dp)
            .then(if (viewState.isLoading) Modifier.shimmer() else Modifier),
        shape = RoundedCornerShape(16.dp),
        elevation = CardDefaults.cardElevation(4.dp),
        colors = CardDefaults.cardColors(containerColor = Color.White)
    ) {
        // 部分实现， 通过 viewState.isLoading 控制显示
            Text(
                modifier = Modifier
                    .background(
                        color = if (viewState.isLoading) Color.LightGray else Color.Transparent,
                        shape = RoundedCornerShape(2.dp)
                    )
                    .then(if (viewState.isLoading) Modifier.shimmer() else Modifier), // shimmer 作用在 Text 上，使其背景闪烁
                text = order.type,
                style = MaterialTheme.typography.titleMedium
            )
    }
}

关于 Modifier.shimmer() 的应用顺序：
Modifier.shimmer() 应该作用在绘制修饰符（如 background）之后，这样才能确保闪烁效果正确地作用于背景色或形状上。

完整代码实现可参考 https://gitee.com/chenjim/ArchitectureMVI 中 ShimmerScreen.kt