Tạo thông báo bằng thanh thông báo nhanh
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
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. Lớp này cung cấp 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 các 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 3 trường hợp sử dụng sau đây mà bạn có thể sử dụng thanh thông báo nhanh:
- Xác nhận hành động: Sau khi người dùng xoá một email hoặc tin nhắn, một thanh thông báo nhanh sẽ 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ẽ bật lên để cho biết ứng dụng hiện đang ở chế độ 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 chế độ cài đặt, một thanh thông báo nhanh sẽ cho biết rằng thay đổi đã được lưu thành công.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Tạo thanh thông báo nhanh cơ bản
Để triển khai thanh thông báo nhanh, trước tiên, bạn hãy tạo SnackbarHost, trong đó 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 phải có CoroutineScope, chẳng hạn như khi sử dụng rememberCoroutineScope — và có thể được gọi lệnh để phản hồi sự kiện giao diện người dùng nhằm hiển thị Snackbar trong Scaffold.
Tạo 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.
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 API SnackbarHost để biết thêm thông tin.
Kết quả
Hình 1. Thông báo trên thanh thông báo nhanh có hành động.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Hiển thị các thành phần tương tác
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-06 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-02-06 UTC."],[],[],null,["# Create a notification with a snackbar\n\n\u003cbr /\u003e\n\nThe [snackbar component](https://material.io/components/snackbars) serves as a brief notification that appears at the\nbottom of the screen. It provides feedback about an operation or action without\ninterrupting the user experience. Snackbars disappear after a few seconds. The\nuser can also dismiss them with an action, such as tapping a button.\n\nConsider these three use cases where you might use a snackbar:\n\n- **Action confirmation:** After a user deletes an email or message, a snackbar appears to confirm the action and offer an \"Undo\" option.\n- **Network status:** When the app loses its internet connection, a snackbar pops up to note that it is now offline.\n- **Data submission:** Upon successfully submitting a form or updating settings, a snackbar notes that the change has saved successfully.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic snackbar\n-----------------------\n\nTo implement a snackbar, you first create [`SnackbarHost`](/reference/kotlin/androidx/compose/material3/package-summary#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)), which includes a\n[`SnackbarHostState`](/reference/kotlin/androidx/compose/material3/SnackbarHostState) property. `SnackbarHostState` provides access to the\n[`showSnackbar()`](/reference/kotlin/androidx/compose/material3/SnackbarHostState#showsnackbar) function which you can use to display your snackbar.\n\nThis suspending function requires a `CoroutineScope` such as with using\n[`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) --- and can be called in response to UI events to\nshow a [`Snackbar`](/reference/kotlin/androidx/compose/material3/package-summary#snackbar) within `Scaffold`.\n\n\u003cbr /\u003e\n\n```kotlin\nval scope = rememberCoroutineScope()\nval snackbarHostState = remember { SnackbarHostState() }\nScaffold(\n snackbarHost = {\n SnackbarHost(hostState = snackbarHostState)\n },\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show snackbar\") },\n icon = { Icon(Icons.Filled.Image, contentDescription = \"\") },\n onClick = {\n scope.launch {\n snackbarHostState.showSnackbar(\"Snackbar\")\n }\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L218-L240\n \n```\n\n\u003cbr /\u003e\n\nCreate a snackbar with action\n-----------------------------\n\nYou can provide an optional action and adjust the duration of the `Snackbar`.\nThe `snackbarHostState.showSnackbar()` function accepts additional `actionLabel`\nand `duration` parameters, and returns a [`SnackbarResult`](/reference/kotlin/androidx/compose/material3/SnackbarResult).\n\n\u003cbr /\u003e\n\n```kotlin\nval scope = rememberCoroutineScope()\nval snackbarHostState = remember { SnackbarHostState() }\nScaffold(\n snackbarHost = {\n SnackbarHost(hostState = snackbarHostState)\n },\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show snackbar\") },\n icon = { Icon(Icons.Filled.Image, contentDescription = \"\") },\n onClick = {\n scope.launch {\n val result = snackbarHostState\n .showSnackbar(\n message = \"Snackbar\",\n actionLabel = \"Action\",\n // Defaults to SnackbarDuration.Short\n duration = SnackbarDuration.Indefinite\n )\n when (result) {\n SnackbarResult.ActionPerformed -\u003e {\n /* Handle snackbar action performed */\n }\n SnackbarResult.Dismissed -\u003e {\n /* Handle snackbar dismissed */\n }\n }\n }\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L247-L283\n \n```\n\n\u003cbr /\u003e\n\nYou can provide a custom `Snackbar` with the `snackbarHost` parameter. See the\n[`SnackbarHost` API reference docs](/reference/kotlin/androidx/compose/material/package-summary#snackbarhost) for more information.\n\nResults\n-------\n\n\n**Figure 1.** Snackbar notifications with action.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
