滑動關閉
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
滑動關閉動畫可提供使用者返回先前頁面的轉場效果。
滑動關閉動畫的詳細資料和 RSB 按一下十分相似。手指最多可控制 50% 的動畫進度。
應用程式檢視畫面有更多和關閉手勢有關的動畫。應用程式檢視畫面上顯示的移動量不一定和手指實際需要移動的距離相同。應用程式檢視畫面不應離開畫面邊緣,而會顯示有一點阻力的擠壓效果。
實作
根據預設,導覽程式庫中的 SwipeDismissableNavHost
會提供滑動關閉導覽手勢。
如果您未使用導覽程式庫,則仍可直接使用 BasicSwipeToDismissBox
支援這項全螢幕導覽手勢。
設計
當設計滑動關閉動作時,請遵守以下兩大原則:
螢幕邊緣
請將其他可以滑動的 UI 元素納入考量,如分頁應用程式檢視畫面。當可以使用滑動關閉時,請保留 20% 的螢幕邊緣,以便觸發此動作。
如要參考當內容可水平捲動時如何實作邊緣滑動,請參閱 此 Wear OS 版 Compose Material 程式碼庫的範例。
返回或留在應用程式檢視畫面的門檻
如果使用者的手指滑動距離超過 50% 螢幕寬度,應用程式應該要觸發剩餘的滑動返回動畫。如果未達此寬度,則應用程式應該返回完整的應用程式檢視畫面。
如果手勢速度很快,請忽略 50% 門檻並滑動返回。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],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."]]