Thông báo nhanh

Thành phần thanh thông báo nhanh đóng vai trò là một thông báo ngắn xuất hiện ở cuối màn hình. API này cung cấp thông tin phản hồi về một thao tác hoặc hành động mà không làm gián đoạn trải nghiệm người dùng. Thanh thông báo nhanh sẽ biến mất sau vài giây. Người dùng cũng có thể đóng thông báo bằng một thao tác, chẳng hạn như nhấn vào một nút.

Hãy xem xét ba trường hợp sử dụng sau (trong đó bạn có thể sử dụng thanh thông báo nhanh):

• Xác nhận thao tác: Sau khi người dùng xoá một email hoặc tin nhắn, thanh thông báo nhanh sẽ xuất hiện để xác nhận thao tác và cung cấp tuỳ chọn "Huỷ".
• Trạng thái mạng: Khi ứng dụng mất kết nối Internet, thanh thông báo nhanh sẽ xuất hiện để cho biết rằng trang hiện đang không kết nối mạng.
• Gửi dữ liệu: Sau khi gửi thành công một biểu mẫu hoặc cập nhật chế độ cài đặt, thanh thông báo nhanh sẽ ghi chú rằng thay đổi đã được lưu thành công.

Ví dụ cơ bản

Để triển khai thanh thông báo nhanh, trước tiên, bạn cần tạo SnackbarHost, bao gồm cả thuộc tính SnackbarHostState. SnackbarHostState cung cấp quyền truy cập vào hàm showSnackbar() mà bạn có thể dùng để hiển thị thanh thông báo nhanh.

Hàm tạm ngưng này cần có một CoroutineScope, chẳng hạn như sử dụng rememberCoroutineScope — và có thể được gọi để phản hồi các sự kiện giao diện người dùng nhằm hiển thị Snackbar trong Scaffold.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}
MaterialLayoutSnippets.kt

Thanh thông báo nhanh kèm thao tác

Bạn có thể cung cấp một hành động tuỳ chọn và điều chỉnh thời lượng của Snackbar. Hàm snackbarHostState.showSnackbar() chấp nhận thông số actionLabel và duration bổ sung, và trả về một SnackbarResult.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    val result = snackbarHostState
                        .showSnackbar(
                            message = "Snackbar",
                            actionLabel = "Action",
                            // Defaults to SnackbarDuration.Short
                            duration = SnackbarDuration.Indefinite
                        )
                    when (result) {
                        SnackbarResult.ActionPerformed -> {
                            /* Handle snackbar action performed */
                        }
                        SnackbarResult.Dismissed -> {
                            /* Handle snackbar dismissed */
                        }
                    }
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}
MaterialLayoutSnippets.kt

Bạn có thể cung cấp Snackbar tuỳ chỉnh với thông số snackbarHost. Hãy xem tài liệu tham khảo về API SnackbarHost để biết thêm thông tin.