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. Công cụ này đưa ra ý kiến phản hồi về một hoạt động 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. Chiến lược phát hành đĩa đơn người dùng cũng có thể loại bỏ bằng một thao tác, chẳng hạn như nhấn vào nút.
Hãy cân nhắc ba trường hợp sử dụng sau đây mà bạn có thể cần dùng thanh thông báo nhanh:
- Xác nhận hành động: Sau khi người dùng xóa một email hoặc thư, thanh thông báo nhanh xuất hiện để xác nhận hành động và đưa ra lựa chọn "Huỷ" .
- Trạng thái mạng: Khi ứng dụng mất kết nối Internet, một thanh thông báo nhanh sẽ xuất hiện bật lên để lưu ý rằng thiết bị này hiện đang ngoại tuyến.
- 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 biểu mẫu các chế độ cài đặt, thanh thông báo nhanh cho biết 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
, trong đó có một đoạn mã
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ư khi sử dụng
rememberCoroutineScope
— và có thể được gọi để phản hồi sự kiện giao diện người dùng để
hiển thị một Snackbar
bên 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 }
Thanh thông báo nhanh có 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 }
Bạn có thể cung cấp Snackbar
tuỳ chỉnh với thông số snackbarHost
. Xem
Tài liệu tham khảo về API SnackbarHost
để biết thêm thông tin.