android compose ProgressIndicator 进度条使用

进度指示器会直观地显示操作的状态。它们会使用动画效果来提醒用户进程（例如加载或处理数据）的完成进度。它们还可以表示正在进行处理，而无需提及完成进度。

请考虑以下三种可能需要使用进度指示器的用例：

加载内容：从网络提取内容时，例如加载图片或用户个人资料数据。
文件上传：向用户反馈上传可能需要的时间。
长时间处理：当应用处理大量数据时，向用户传达已完成的总量。

在 Material Design 中，进度指示器分为两种类型：

确定性：准确显示已完成的进度。
不确定性：持续动画，不考虑进度。

同样，进度指示器可以采用以下两种形式之一：

线性：从左到右填充的水平条。
圆形：一个圆，其笔划长度不断增加，直到覆盖圆的整个周长。

虽然可以使用多个可组合项来创建与 Material Design 一致的进度指示器，但它们的参数差异不大。您应该记住的关键参数包括：

progress：指示器显示的当前进度。传递介于 0.0 和 1.0 之间的 Float。
color：实际指示器的颜色。也就是说，组件中反映进度的部分，当进度完成时，该部分会完全覆盖组件。
trackColor：绘制指示器的轨迹的颜色。

确定性指示器

确定性指示器会准确反映操作的完成进度。使用 LinearProgressIndicator或CircularProgressIndicator 可组合项，并为progress参数传递一个值。

以下代码段提供了一个相对详细的示例。当用户按下按钮时，应用会显示进度指示器，并启动一个协程，该协程会逐渐增加 progress 的值。这会导致进度指示器依次递增。

不确定性指示器

不确定性指示器不会反映操作的完成进度。相反，它会使用动画效果向用户表明处理正在进行，但不会指定任何完成度。

如需创建不确定性进度指示器，请使用 LinearProgressIndicator 或 CircularProgressIndicator 可组合项，但不要为 progress 传入值。以下示例演示了如何通过按下按钮来切换不确定性指示器。

复制代码

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Colors

import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/27 14:27
 * Description : 进度条使用
 */
class ProgressIndicatorActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ProgressIndicatorExample()
                }
            }
        }
    }

    @Preview
    @Composable
    fun ProgressIndicatorExample(){
        Column(
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(Modifier.height(20.dp))
            Text("进度条使用", color = Color.Red, fontSize = 30.sp)
            Spacer(Modifier.height(20.dp))
            DeterminateProgressIndicatorExample()
            Spacer(Modifier.height(80.dp))
            IndeterminateCircularIndicator()
        }
    }

    //确定进度条
    @Preview
    @Composable
    fun DeterminateProgressIndicatorExample(){
        var currentProgress by remember { mutableFloatStateOf(0f) }
        var loading by remember { mutableStateOf(false) }
        val scope = rememberCoroutineScope ()

        Column(
            verticalArrangement = Arrangement.spacedBy(12.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.fillMaxWidth()
        ) {

            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                Button(onClick = {
                    loading = true
                    scope.launch {
                        loadProgress { progress ->
                            currentProgress = progress
                        }
                    }
                }, enabled = !loading
                ) {
                    Text("开始加载")
                }

                Text("当前进度：${(currentProgress * 100).toInt()}",
                    modifier = Modifier.padding(start = 20.dp))
            }


            if(loading){
                //线性进度条
                LinearProgressIndicator(
                    progress = {currentProgress},
                    modifier = Modifier.fillMaxWidth()
                )

                //圆形进度条
                CircularProgressIndicator(
                    progress = {
                        currentProgress
                    },
                    modifier = Modifier.width(100.dp)
                )
            }
        }

    }

    //不确定进度条
    @Preview
    @Composable
    fun IndeterminateCircularIndicator(){
        var loading by remember { mutableStateOf(false) }
        Button(onClick = {
            loading = true
        }, enabled = !loading) {
            Text("不确定进度条")
        }
        if(!loading) return

        CircularProgressIndicator(
            modifier = Modifier.width(64.dp),
            color = MaterialTheme.colorScheme.secondary,
            trackColor = MaterialTheme.colorScheme.surfaceVariant
        )
    }

    //更新进度
    suspend fun loadProgress(updateProgress : (Float) -> Unit){
        for(i in 1..100){
            updateProgress(i.toFloat() / 100)
            delay(100)
        }
    }
}

android compose ProgressIndicator 进度条 使用

确定性指示器

不确定性指示器

android compose ProgressIndicator 进度条使用