Vuốt để bỏ qua
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.
Ảnh động Vuốt để đóng sẽ truyền tải hiệu ứng chuyển đổi khi người dùng chuyển về trang trước.
Các chi tiết ảnh động cho thao tác vuốt để đóng cũng tương tự như thao tác nhấn RSB. Ngón tay của bạn sẽ kiểm soát tiến trình của ảnh động lên đến 50%.
Có một ảnh động bổ sung trên Chế độ xem ứng dụng được liên kết với cử chỉ đóng. Số lượng chuyển động hiển thị trên chế độ xem ứng dụng không chính xác với khoảng cách mà ngón tay cần di chuyển. Chế độ xem ứng dụng không được rời khỏi cạnh mép của màn hình, cho thấy một hiệu ứng bóp vào hai cạnh khi có lực cản.
Triển khai
SwipeDismissableNavHost
trong thư viện điều hướng cung cấp cử chỉ vuốt để đóng theo mặc định.
Nếu không sử dụng thư viện điều hướng, bạn vẫn có thể hỗ trợ cử chỉ điều hướng toàn màn hình này bằng cách sử dụng trực tiếp BasicSwipeToDismissBox
.
Thiết kế
Khi thiết kế thao tác vuốt để đóng (loại bỏ) một hành động, hãy lưu ý hai nguyên tắc sau:
Cạnh màn hình
Tính đến các phần tử giao diện người dùng khác có thể vuốt được, chẳng hạn như các chế độ xem ứng dụng được phân trang.
Khi có thể vuốt để đóng, hãy dành 20% cạnh của màn hình để kích hoạt chuyển động đó.
Hãy xem ví dụ này trong cơ sở mã Compose Material cho Wear OS để biết ví dụ về thao tác vuốt cạnh khi nội dung có thể cuộn theo chiều ngang.
Ngưỡng để quay lại hoặc tiếp tục ở chế độ xem ứng dụng
Nếu người dùng đã kéo ngón tay qua hơn 50% chiều rộng màn hình, ứng dụng sẽ kích hoạt phần còn lại của ảnh động vuốt ngược. Còn nếu ít hơn 50% chiều rộng màn hình, ứng dụng sẽ quay lại chế độ xem toàn bộ ứng dụng.
Nếu cử chỉ diễn ra nhanh, hãy bỏ qua quy tắc ngưỡng 50% và vuốt ngược lại.
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-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],null,["# Swipe to dismiss\n\n[Swipe to dismiss](/reference/kotlin/androidx/wear/compose/foundation/package-summary#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))\nanimation conveys the transition when users navigate to the previous page.\n\nThe animation details for swipe to dismiss are similar to the RSB press. Your\nfinger controls the progress of the animation up to 50%.\n\nThere is an additional animation on the App View that is linked to the dismiss\ngesture. The amount of movement shown on the app view is not exactly the same as\nthe distance that the finger needs to move. The app view should never leave the\nedge of the screen, displaying a squeeze like effect with some resistance.\n\nImplementation\n--------------\n\n[`SwipeDismissableNavHost`](/reference/kotlin/androidx/wear/compose/navigation/package-summary#SwipeDismissableNavHost(androidx.navigation.NavHostController,kotlin.String,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.navigation.SwipeDismissableNavHostState,kotlin.String,kotlin.Function1))\nfrom the [navigation library](/training/wearables/compose/navigation)\nprovides the swipe-to-dismiss navigation gesture by default.\n\nIf you are not using the navigation library, then you can still support this full\nscreen navigation gesture by using [`BasicSwipeToDismissBox`](/reference/kotlin/androidx/wear/compose/foundation/package-summary#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))\ndirectly.\n\nDesign\n------\n\nWhen designing the swipe to dismiss action, keep the following two principles\nin mind:\n\n### Edge of the screen\n\nAccount for other UI elements that are swipable, such as paginated app views.\nWhen swipe to dismiss is possible, reserve 20% of the edge of the screen to\ntrigger that motion.\n\nSee this [example from the Compose Material for Wear OS codebase](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:wear/compose/compose-material/samples/src/main/java/androidx/wear/compose/material/samples/SwipeToDismissBoxSample.kt;l=151)\nfor an example of edge-swiping when the content is horizontally scrollable.\n\n### Threshold to go back or stay on app view\n\nIf the user has dragged their finger across over 50% of the screen width,\nthe app should trigger the rest of the swipe back animation. If it's less than\nthat, the app should snap back to the full app view.\n\nIf the gesture is quick, ignore the 50% threshold rule and swipe back."]]