滑動關閉

滑動關閉動畫可提供使用者返回先前頁面的轉場效果。

滑動關閉動畫的詳細資料和 RSB 按一下十分相似。手指最多可控制 50% 的動畫進度。

應用程式檢視畫面有更多和關閉手勢有關的動畫。應用程式檢視畫面上顯示的移動量不一定和手指實際需要移動的距離相同。應用程式檢視畫面不應離開畫面邊緣，而會顯示有一點阻力的擠壓效果。

實作

Wear 有專屬的 Box 版本 (SwipeToDismissBox)。此版本新增對滑動關閉手勢的支援，功能和行動裝置的返回按鈕相似。

SwipeToDismissBox 可組合項可以藉由向右滑動關閉。

若要使用 SwipeToDismissBox，您必須先建立狀態。狀態內含有滑動方向、動畫是否正在播放、目前值、目標等多種資訊。以下範例說明如何設計簡單的滑動關閉動作：

val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
    onDismissed = { /* navigateBack */ },
) { isBackground ->
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Swipe to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}

如果想深入瞭解如何使用 SwipeToDismissBox 和 Navigation 程式庫，請看 Wear Compose Navigation 程式庫的參考文件。

設計

當設計滑動關閉動作時，請遵守以下兩大原則：

螢幕邊緣

請將其他可以滑動的 UI 元素納入考量，如分頁應用程式檢視畫面。當可以使用滑動關閉時，請保留 20% 的螢幕邊緣，以便觸發此動作。

請參閱 Wear OS 適用的 Compose Material 程式碼集範例 可水平捲動內容範例使用邊緣滑動手勢。

返回或留在應用程式檢視畫面的門檻

如果使用者的手指滑動距離超過 50% 螢幕寬度，應用程式應該要觸發剩餘的滑動返回動畫。如果未達此寬度，則應用程式應該返回完整的應用程式檢視畫面。

如果手勢速度很快，請忽略 50% 門檻並滑動返回。