Android Compose 框架进度指示器深入剖析(五十二)

Android Compose 框架进度指示器深入剖析

一、引言

在 Android 应用开发中，进度指示器是一种非常重要的 UI 组件，它用于向用户展示某个操作的进度，让用户了解操作的执行情况，避免用户在等待过程中产生焦虑感。Android Compose 是 Google 推出的用于构建 Android UI 的现代声明式框架，它提供了一系列简洁易用的进度指示器组件，如线性进度指示器（LinearProgressIndicator）和圆形进度指示器（CircularProgressIndicator）。

本文将深入分析 Android Compose 框架中的进度指示器，从基本使用入手，逐步深入到源码级别，详细探讨其实现原理、工作流程以及设计思路。通过对进度指示器的深入剖析，开发者可以更好地理解和使用这些组件，同时也能从中学习到 Android Compose 框架的一些优秀设计理念和编程技巧。

二、进度指示器的基本使用

2.1 引入依赖

要使用 Android Compose 中的进度指示器，首先需要在项目中引入相关的依赖。在 build.gradle 文件中添加以下依赖：

groovy

// 添加 Android Compose 相关依赖
implementation 'androidx.compose.material3:material3:1.1.0'

这里使用的是 material3 库，它包含了 Android Compose 中丰富的 Material Design 组件，其中就包括进度指示器。

2.2 线性进度指示器的基本使用

线性进度指示器通常用于展示水平方向的进度。以下是一个简单的线性进度指示器的使用示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable

@Composable
fun LinearProgressIndicatorExample() {
    // 定义一个可变状态，用于存储进度值，初始值为 0.5
    var progress by mutableStateOf(0.5f)

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前进度值的文本
        Text(text = "当前进度: ${(progress * 100).toInt()}%")
        // 创建线性进度指示器，设置进度值为上面定义的可变状态
        LinearProgressIndicator(
            progress = progress,
            modifier = Modifier.fillMaxWidth()
        )
        // 这里可以添加代码来更新进度值，例如通过按钮点击事件
    }
}

在这个示例中，我们创建了一个线性进度指示器，并将其进度值设置为一个可变状态 progress。同时，我们还显示了当前的进度百分比。

2.3 圆形进度指示器的基本使用

圆形进度指示器通常用于展示环形的进度。以下是一个简单的圆形进度指示器的使用示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable

@Composable
fun CircularProgressIndicatorExample() {
    // 定义一个可变状态，用于存储进度值，初始值为 0.3
    var progress by mutableStateOf(0.3f)

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前进度值的文本
        Text(text = "当前进度: ${(progress * 100).toInt()}%")
        // 创建圆形进度指示器，设置进度值为上面定义的可变状态，并设置大小
        CircularProgressIndicator(
            progress = progress,
            modifier = Modifier.size(50.dp)
        )
        // 这里可以添加代码来更新进度值，例如通过按钮点击事件
    }
}

在这个示例中，我们创建了一个圆形进度指示器，并将其进度值设置为一个可变状态 progress。同时，我们还显示了当前的进度百分比。

2.4 不确定进度指示器的使用

除了显示确定的进度，进度指示器还可以显示不确定的进度，即表示操作正在进行中，但不知道具体的进度。以下是不确定线性进度指示器和圆形进度指示器的使用示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun IndeterminateProgressIndicatorExample() {
    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 创建不确定的线性进度指示器
        LinearProgressIndicator(
            modifier = Modifier.fillMaxWidth()
        )
        // 创建不确定的圆形进度指示器，并设置大小
        CircularProgressIndicator(
            modifier = Modifier.size(50.dp)
        )
    }
}

在这个示例中，我们没有为进度指示器设置具体的进度值，因此它们会显示为不确定的进度状态。

三、进度指示器的源码结构概述

3.1 主要类和函数

在 Android Compose 的 material3 库中，与进度指示器相关的主要类和函数包括：

• LinearProgressIndicator：Composable 函数，用于创建线性进度指示器。
• CircularProgressIndicator：Composable 函数，用于创建圆形进度指示器。
• ProgressIndicatorDefaults：包含进度指示器的默认值和样式的类。

3.2 源码文件位置

这些类和函数的源码文件位于 androidx.compose.material3 包下，具体路径可能会根据 Android Compose 版本的不同而有所变化。一般来说，可以在 Android Studio 的 Project 视图中找到相应的源码文件。

四、线性进度指示器源码分析

4.1 函数定义和参数

kotlin

// 线性进度指示器的 Composable 函数定义
@Composable
fun LinearProgressIndicator(
    // 进度值，范围从 0 到 1，如果为 null 则表示不确定进度
    progress: Float? = null,
    // 修饰符，用于设置布局和样式
    modifier: Modifier = Modifier,
    // 进度条的颜色
    color: Color = ProgressIndicatorDefaults.LinearColor,
    // 进度条背景的颜色
    trackColor: Color = ProgressIndicatorDefaults.LinearTrackColor
) {
    // 调用内部的 LinearProgressIndicatorImpl 函数来实现具体的绘制逻辑
    LinearProgressIndicatorImpl(
        progress = progress,
        modifier = modifier,
        color = color,
        trackColor = trackColor
    )
}

• 参数说明：

  • progress ：进度值，范围从 0 到 1。如果为 null，则表示不确定进度。
  • modifier ：用于修饰线性进度指示器的 Modifier 实例，可以设置其大小、边距等布局属性。
  • color ：进度条的颜色，默认值从 ProgressIndicatorDefaults.LinearColor 获取。
  • trackColor ：进度条背景的颜色，默认值从 ProgressIndicatorDefaults.LinearTrackColor 获取。

4.2 LinearProgressIndicatorImpl 函数分析

kotlin

@Composable
private fun LinearProgressIndicatorImpl(
    progress: Float? = null,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.LinearColor,
    trackColor: Color = ProgressIndicatorDefaults.LinearTrackColor
) {
    // 创建一个 Canvas 组件，用于绘制进度条
    Canvas(
        modifier = modifier
           .height(LinearProgressIndicatorHeight) // 设置进度条的高度
           .fillMaxWidth() // 宽度填充父容器
    ) {
        // 绘制进度条的背景
        drawRect(
            color = trackColor,
            size = Size(size.width, LinearProgressIndicatorHeight.toPx())
        )
        if (progress != null) {
            // 如果进度值不为 null，表示是确定进度
            // 计算进度条的宽度
            val progressWidth = size.width * progress
            // 绘制进度条
            drawRect(
                color = color,
                size = Size(progressWidth, LinearProgressIndicatorHeight.toPx())
            )
        } else {
            // 如果进度值为 null，表示是不确定进度
            // 调用 IndeterminateLinearIndicator 函数绘制不确定进度条
            IndeterminateLinearIndicator(
                color = color,
                size = size
            )
        }
    }
}

• 工作流程：

  1. 创建一个 Canvas 组件，设置其高度和宽度。
  2. 绘制进度条的背景，使用 drawRect 函数，颜色为 trackColor。
  3. 如果 progress 不为 null，表示是确定进度，计算进度条的宽度，并使用 drawRect 函数绘制进度条。
  4. 如果 progress 为 null，表示是不确定进度，调用 IndeterminateLinearIndicator 函数绘制不确定进度条。

4.3 IndeterminateLinearIndicator 函数分析

kotlin

@Composable
private fun IndeterminateLinearIndicator(
    color: Color,
    size: Size
) {
    // 创建一个无限循环的动画，用于控制不确定进度条的动画效果
    val infiniteTransition = rememberInfiniteTransition()
    // 定义一个动画，从 0 到 1 无限循环，动画时长为 1000 毫秒
    val offset by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(1000, easing = FastOutSlowInEasing),
            repeatMode = RepeatMode.Restart
        )
    )
    // 计算进度条的宽度
    val progressWidth = size.width * 0.2f
    // 计算进度条的起始位置
    val startX = (size.width - progressWidth) * offset
    // 创建一个 Canvas 组件，用于绘制不确定进度条
    Canvas(
        modifier = Modifier
           .fillMaxSize()
    ) {
        // 绘制不确定进度条
        drawRect(
            color = color,
            topLeft = Offset(startX, 0f),
            size = Size(progressWidth, size.height)
        )
    }
}

• 工作流程：

  1. 创建一个无限循环的动画 infiniteTransition。
  2. 定义一个从 0 到 1 的动画，动画时长为 1000 毫秒，使用 FastOutSlowInEasing 缓动函数，重复模式为 Restart。
  3. 计算进度条的宽度和起始位置。
  4. 创建一个 Canvas 组件，使用 drawRect 函数绘制不确定进度条，进度条的起始位置随着动画的变化而变化。

五、圆形进度指示器源码分析

5.1 函数定义和参数

kotlin

// 圆形进度指示器的 Composable 函数定义
@Composable
fun CircularProgressIndicator(
    // 进度值，范围从 0 到 1，如果为 null 则表示不确定进度
    progress: Float? = null,
    // 修饰符，用于设置布局和样式
    modifier: Modifier = Modifier,
    // 进度条的颜色
    color: Color = ProgressIndicatorDefaults.CircularColor,
    // 进度条的笔触宽度
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth
) {
    // 调用内部的 CircularProgressIndicatorImpl 函数来实现具体的绘制逻辑
    CircularProgressIndicatorImpl(
        progress = progress,
        modifier = modifier,
        color = color,
        strokeWidth = strokeWidth
    )
}

• 参数说明：

  • progress ：进度值，范围从 0 到 1。如果为 null，则表示不确定进度。
  • modifier ：用于修饰圆形进度指示器的 Modifier 实例，可以设置其大小、边距等布局属性。
  • color ：进度条的颜色，默认值从 ProgressIndicatorDefaults.CircularColor 获取。
  • strokeWidth ：进度条的笔触宽度，默认值从 ProgressIndicatorDefaults.CircularStrokeWidth 获取。

5.2 CircularProgressIndicatorImpl 函数分析

kotlin

@Composable
private fun CircularProgressIndicatorImpl(
    progress: Float? = null,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.CircularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth
) {
    // 创建一个 Canvas 组件，用于绘制圆形进度条
    Canvas(
        modifier = modifier
           .aspectRatio(1f) // 设置宽高比为 1:1，保证是圆形
    ) {
        // 计算笔触的半径
        val strokeRadius = (size.minDimension - strokeWidth.toPx()) / 2f
        // 计算圆心位置
        val center = Offset(size.width / 2f, size.height / 2f)
        // 绘制圆形进度条的背景
        drawCircle(
            color = color.copy(alpha = 0.12f),
            radius = strokeRadius,
            center = center,
            style = Stroke(width = strokeWidth.toPx())
        )
        if (progress != null) {
            // 如果进度值不为 null，表示是确定进度
            // 计算进度条的扫过角度
            val sweepAngle = 360f * progress
            // 绘制圆形进度条
            drawArc(
                color = color,
                startAngle = -90f,
                sweepAngle = sweepAngle,
                useCenter = false,
                topLeft = Offset(
                    x = center.x - strokeRadius,
                    y = center.y - strokeRadius
                ),
                size = Size(strokeRadius * 2f, strokeRadius * 2f),
                style = Stroke(width = strokeWidth.toPx())
            )
        } else {
            // 如果进度值为 null，表示是不确定进度
            // 调用 IndeterminateCircularIndicator 函数绘制不确定进度条
            IndeterminateCircularIndicator(
                color = color,
                size = size,
                strokeWidth = strokeWidth
            )
        }
    }
}

• 工作流程：

  1. 创建一个 Canvas 组件，设置其宽高比为 1:1，保证是圆形。
  2. 计算笔触的半径和圆心位置。
  3. 绘制圆形进度条的背景，使用 drawCircle 函数，颜色为 color 的半透明版本。
  4. 如果 progress 不为 null，表示是确定进度，计算进度条的扫过角度，并使用 drawArc 函数绘制圆形进度条。
  5. 如果 progress 为 null，表示是不确定进度，调用 IndeterminateCircularIndicator 函数绘制不确定进度条。

5.3 IndeterminateCircularIndicator 函数分析

kotlin

@Composable
private fun IndeterminateCircularIndicator(
    color: Color,
    size: Size,
    strokeWidth: Dp
) {
    // 创建一个无限循环的动画，用于控制不确定进度条的动画效果
    val infiniteTransition = rememberInfiniteTransition()
    // 定义一个动画，从 0 到 1 无限循环，动画时长为 1332 毫秒
    val rotate by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(1332, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )
    // 定义一个动画，从 0 到 0.8f 无限循环，动画时长为 666 毫秒
    val scale by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 0.8f,
        animationSpec = infiniteRepeatable(
            animation = tween(666, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )
    // 计算笔触的半径
    val strokeRadius = (size.minDimension - strokeWidth.toPx()) / 2f
    // 计算圆心位置
    val center = Offset(size.width / 2f, size.height / 2f)
    // 创建一个 Canvas 组件，用于绘制不确定进度条
    Canvas(
        modifier = Modifier
           .fillMaxSize()
    ) {
        // 保存当前的画布状态
        save()
        // 旋转画布
        rotate(rotate * 360f, pivot = center)
        // 绘制不确定进度条
        drawArc(
            color = color,
            startAngle = -90f,
            sweepAngle = 270f * scale,
            useCenter = false,
            topLeft = Offset(
                x = center.x - strokeRadius,
                y = center.y - strokeRadius
            ),
            size = Size(strokeRadius * 2f, strokeRadius * 2f),
            style = Stroke(width = strokeWidth.toPx())
        )
        // 恢复画布状态
        restore()
    }
}

• 工作流程：

  1. 创建一个无限循环的动画 infiniteTransition。
  2. 定义两个动画，一个控制旋转角度，从 0 到 1 无限循环，动画时长为 1332 毫秒；另一个控制进度条的长度，从 0 到 0.8f 无限循环，动画时长为 666 毫秒。
  3. 计算笔触的半径和圆心位置。
  4. 创建一个 Canvas 组件，保存当前的画布状态，旋转画布，绘制不确定进度条，然后恢复画布状态。

六、进度指示器的样式定制

6.1 颜色定制

可以通过修改 color 和 trackColor 参数来定制进度指示器的颜色。以下是一个线性进度指示器颜色定制的示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable

@Composable
fun CustomColorProgressIndicatorExample() {
    // 定义一个可变状态，用于存储进度值，初始值为 0.7
    var progress by mutableStateOf(0.7f)

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前进度值的文本
        Text(text = "当前进度: ${(progress * 100).toInt()}%")
        // 创建线性进度指示器，定制进度条颜色为红色，背景颜色为灰色
        LinearProgressIndicator(
            progress = progress,
            modifier = Modifier.fillMaxWidth(),
            color = Color.Red,
            trackColor = Color.Gray
        )
    }
}

在这个示例中，我们将线性进度指示器的进度条颜色设置为红色，背景颜色设置为灰色。

6.2 大小定制

可以通过 Modifier 来定制进度指示器的大小。以下是一个圆形进度指示器大小定制的示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable

@Composable
fun CustomSizeProgressIndicatorExample() {
    // 定义一个可变状态，用于存储进度值，初始值为 0.4
    var progress by mutableStateOf(0.4f)

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前进度值的文本
        Text(text = "当前进度: ${(progress * 100).toInt()}%")
        // 创建圆形进度指示器，定制大小为 100dp
        CircularProgressIndicator(
            progress = progress,
            modifier = Modifier.size(100.dp)
        )
    }
}

在这个示例中，我们将圆形进度指示器的大小设置为 100dp。

6.3 笔触宽度定制

对于圆形进度指示器，可以通过 strokeWidth 参数来定制笔触宽度。以下是一个圆形进度指示器笔触宽度定制的示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable

@Composable
fun CustomStrokeWidthProgressIndicatorExample() {
    // 定义一个可变状态，用于存储进度值，初始值为 0.6
    var progress by mutableStateOf(0.6f)

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前进度值的文本
        Text(text = "当前进度: ${(progress * 100).toInt()}%")
        // 创建圆形进度指示器，定制笔触宽度为 10dp
        CircularProgressIndicator(
            progress = progress,
            modifier = Modifier.size(80.dp),
            strokeWidth = 10.dp
        )
    }
}

在这个示例中，我们将圆形进度指示器的笔触宽度设置为 10dp。

七、进度指示器的性能优化

7.1 避免不必要的重绘

在使用进度指示器时，要避免不必要的重绘。可以通过使用 remember 函数来缓存一些状态和数据，减少不必要的计算。例如，在创建进度指示器时，将进度值存储在 remember 变量中：

kotlin

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable

@Composable
fun OptimizedProgressIndicatorExample() {
    // 使用 remember 函数缓存进度值
    var progress by remember { mutableStateOf(0.5f) }
    // 这里可以添加代码来更新进度值
    // ...
}

7.2 优化动画性能

如果使用了不确定进度指示器的动画效果，要注意优化动画的性能。可以通过减少动画的复杂度、使用硬件加速等方式来提高动画的流畅度。例如，在定义动画时，选择合适的缓动函数和动画时长：

kotlin

import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.runtime.getValue
import androidx.compose.runtime.Composable

@Composable
fun OptimizedIndeterminateProgressIndicator() {
    // 创建一个无限循环的动画
    val infiniteTransition = rememberInfiniteTransition()
    // 定义一个动画，从 0 到 1 无限循环，使用合适的缓动函数和动画时长
    val offset by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(1000, easing = FastOutSlowInEasing),
            repeatMode = RepeatMode.Restart
        )
    )
    // 这里可以使用 offset 来控制进度指示器的动画效果
    // ...
}

7.3 减少内存占用

在显示大量进度指示器时，要注意减少内存占用。可以通过限制同时显示的进度指示器数量、及时释放不再使用的资源等方式来减少内存开销。例如，在列表中显示进度指示器时，可以使用分页加载或虚拟列表技术。

八、进度指示器的常见问题及解决方案

8.1 进度指示器不显示

• 问题原因：

  • 进度指示器的 Modifier 设置不正确，导致其大小为 0。
  • 进度指示器的颜色与背景颜色相同，导致看不见。
  • 进度指示器的 progress 值设置不正确，如超出了 0 到 1 的范围。

• 解决方案：

  • 检查 Modifier 的设置，确保进度指示器有合适的大小。
  • 检查进度指示器的颜色设置，确保与背景颜色有足够的对比度。
  • 确保 progress 值在 0 到 1 的范围内。

8.2 进度指示器动画卡顿

• 问题原因：

  • 动画复杂度太高，导致 CPU 负载过大。
  • 设备性能不足，无法流畅运行动画。

• 解决方案：

  • 简化动画效果，选择简单的缓动函数和动画时长。
  • 优化代码，减少不必要的计算，提高性能。

8.3 进度指示器更新不及时

• 问题原因：

  • 进度值的更新没有触发组件的重新组合。
  • 进度值的更新过于频繁，导致界面刷新不及时。

• 解决方案：

  • 确保进度值是可变状态，并且在更新时能触发组件的重新组合。
  • 适当降低进度值的更新频率，避免过于频繁的刷新。

九、进度指示器在实际项目中的应用场景

9.1 文件下载

在文件下载过程中，可以使用进度指示器来显示下载进度。用户可以通过进度指示器了解下载的完成情况，避免在等待过程中产生焦虑感。以下是一个简单的文件下载进度指示器的示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import androidx.compose.runtime.rememberCoroutineScope

@Composable
fun FileDownloadProgressIndicatorExample() {
    // 定义一个可变状态，用于存储下载进度值，初始值为 0
    var progress by mutableStateOf(0f)
    // 获取协程作用域
    val scope = rememberCoroutineScope()

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前下载进度值的文本
        Text(text = "下载进度: ${(progress * 100).toInt()}%")
        // 创建线性进度指示器，显示下载进度
        LinearProgressIndicator(
            progress = progress,
            modifier = Modifier.fillMaxWidth()
        )
        // 模拟文件下载过程
        scope.launch {
            for (i in 0..100) {
                // 模拟下载过程中的延迟
                delay(100)
                // 更新下载进度值
                progress = i / 100f
            }
        }
    }
}

在这个示例中，我们使用线性进度指示器来显示文件下载的进度，通过协程模拟文件下载过程，并更新进度值。

9.2 数据加载

在加载大量数据时，可以使用进度指示器来显示数据加载的进度。例如，在从网络获取数据时，用户可以通过进度指示器了解数据加载的完成情况。以下是一个简单的数据加载进度指示器的示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import androidx.compose.runtime.rememberCoroutineScope

@Composable
fun DataLoadingProgressIndicatorExample() {
    // 定义一个可变状态，用于存储数据加载进度值，初始值为 0
    var progress by mutableStateOf(0f)
    // 获取协程作用域
    val scope = rememberCoroutineScope()

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前数据加载进度值的文本
        Text(text = "数据加载进度: ${(progress * 100).toInt()}%")
        // 创建圆形进度指示器，显示数据加载进度
        CircularProgressIndicator(
            progress = progress,
            modifier = Modifier.size(50.dp)
        )
        // 模拟数据加载过程
        scope.launch {
            for (i in 0..100) {
                // 模拟数据加载过程中的延迟
                delay(50)
                // 更新数据加载进度值
                progress = i / 100f
            }
        }
    }
}

在这个示例中，我们使用圆形进度指示器来显示数据加载的进度，通过协程模拟数据加载过程，并更新进度值。

9.3 任务处理

在执行一些耗时的任务时，如图片处理、视频编码等，可以使用进度指示器来显示任务处理的进度。用户可以通过进度指示器了解任务的执行情况，避免在等待过程中产生焦虑感。以下是一个简单的任务处理进度指示器的示例：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import androidx.compose.runtime.rememberCoroutineScope

@Composable
fun TaskProcessingProgressIndicatorExample() {
    // 定义一个可变状态，用于存储任务处理进度值，初始值为 0
    var progress by mutableStateOf(0f)
    // 获取协程作用域
    val scope = rememberCoroutineScope()

    Column(
        modifier = Modifier
           .fillMaxWidth()
           .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 显示当前任务处理进度值的文本
        Text(text = "任务处理进度: ${(progress * 100).toInt()}%")
        // 创建线性进度指示器，显示任务处理进度
        LinearProgressIndicator(
            progress = progress,
            modifier = Modifier.fillMaxWidth()
        )
        // 模拟任务处理过程
        scope.launch {
            for (i in 0..100) {
                // 模拟任务处理过程中的延迟
                delay(80)
                // 更新任务处理进度值
                progress = i / 100f
            }
        }
    }
}

在这个示例中，我们使用线性进度指示器来显示任务处理的进度，通过协程模拟任务处理过程，并更新进度值。