Chỉ báo tiến trình

Chỉ báo tiến trình hiển thị trực quan trạng thái của một thao tác. Các hiệu ứng này sử dụng chuyển động để cho người dùng biết quy trình sắp hoàn tất đến mức nào, chẳng hạn như tải hoặc xử lý dữ liệu. Các chỉ báo này cũng có thể cho biết rằng quá trình xử lý đang diễn ra mà không cần tham chiếu đến mức độ hoàn tất của quá trình.

Hãy xem xét ba trường hợp sử dụng sau đây mà bạn có thể sử dụng chỉ báo tiến trình:

  • Tải nội dung: Trong khi tìm nạp nội dung từ mạng, chẳng hạn như tải hình ảnh hoặc dữ liệu cho hồ sơ người dùng.
  • Tải tệp lên: Cung cấp cho người dùng ý kiến phản hồi về thời gian tải lên.
  • Xử lý lâu: Trong khi ứng dụng đang xử lý một lượng lớn dữ liệu, hãy cho người dùng biết tỷ lệ phần trăm tổng số dữ liệu đã xử lý.

Trong Material Design, có hai loại chỉ báo tiến trình:

  • Xác định: Hiển thị chính xác tiến độ.
  • Không xác định: Tạo ảnh động liên tục mà không quan tâm đến tiến trình.

Tương tự, chỉ báo tiến trình có thể ở một trong hai dạng sau:

  • Tuyến tính: Thanh ngang lấp đầy từ trái sang phải.
  • Vòng tròn: Một vòng tròn có nét tăng dần theo chiều dài cho đến khi bao gồm toàn bộ chu vi của đường tròn.
Chỉ báo tiến trình tuyến tính cùng với chỉ báo tiến trình vòng tròn.
Hình 1. Có hai loại chỉ báo tiến trình.

API Surface

Mặc dù bạn có thể sử dụng một số thành phần kết hợp để tạo chỉ báo tiến trình phù hợp với Material Design, các tham số của chúng không khác nhau đáng kể. Trong số các tham số chính, bạn cần lưu ý những tham số sau:

  • progress: Tiến trình hiện tại mà chỉ báo hiển thị. Truyền một Float trong khoảng từ 0.0 đến 1.0.
  • color: Màu của chỉ báo thực tế. Đó là một phần của thành phần phản ánh tiến trình và bao gồm đầy đủ thành phần khi tiến trình hoàn tất.
  • trackColor: Màu của kênh mà chỉ báo được vẽ trên đó.

Xác định chỉ báo

Chỉ báo xác định phản ánh chính xác mức độ hoàn tất của một hành động. Sử dụng một trong hai LinearProgressIndicator hoặc CircularProgressIndicator thành phần kết hợp và truyền giá trị cho tham số progress.

Đoạn mã sau đây cung cấp một ví dụ tương đối chi tiết. Khi người dùng nhấn vào nút, ứng dụng sẽ hiển thị chỉ báo tiến trình và khởi chạy một coroutine tăng dần giá trị của progress. Điều này khiến chỉ báo tiến trình lặp lại theo thứ tự.

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableStateOf(0f) }
    var loading by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope() // Create a coroutine scope

    Column(
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(onClick = {
            loading = true
            scope.launch {
                loadProgress { progress ->
                    currentProgress = progress
                }
                loading = false // Reset loading when the coroutine finishes
            }
        }, enabled = !loading) {
            Text("Start loading")
        }

        if (loading) {
            LinearProgressIndicator(
                progress = { currentProgress },
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

/** Iterate the progress value */
suspend fun loadProgress(updateProgress: (Float) -> Unit) {
    for (i in 1..100) {
        updateProgress(i.toFloat() / 100)
        delay(100)
    }
}
ProgressIndicator.kt

Khi quá trình tải hoàn tất một phần, chỉ báo tuyến tính trong ví dụ trước sẽ xuất hiện như sau:

Tương tự, chỉ báo vòng tròn xuất hiện như sau:

Chỉ báo không xác định

Chỉ báo chưa xác định không phản ánh mức độ hoàn tất một hoạt động của chúng tôi. Thay vào đó, hệ thống sẽ sử dụng chuyển động để cho người dùng biết rằng quá trình xử lý đang diễn ra, mà không chỉ định mức độ hoàn thành nào.

Để tạo một chỉ báo tiến trình không xác định, hãy sử dụng LinearProgressIndicator hoặc CircularProgressIndicator, nhưng không truyền giá trị cho progress. Ví dụ sau minh hoạ cách bạn có thể bật/tắt một chỉ báo không xác định bằng cách nhấn nút.

@Composable
fun IndeterminateCircularIndicator() {
    var loading by remember { mutableStateOf(false) }

    Button(onClick = { loading = true }, enabled = !loading) {
        Text("Start loading")
    }

    if (!loading) return

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

Sau đây là ví dụ về cách triển khai này khi chỉ báo đang hoạt động:

Sau đây là ví dụ về cách triển khai tương tự nhưng với LinearProgressIndicator thay vì CircularProgressIndicator.

Tài nguyên khác