Compose 中的預測返回功能

預測返回是一種手勢導覽功能，可讓使用者預覽返回滑動手勢的目的地。預測返回功能可與 Compose 無縫整合，提升應用程式的導覽體驗。使用者在應用程式中返回時，可享有更流暢、更直覺的轉場效果。圖 1 顯示這項功能在 SociaLite 範例應用程式中的運作方式。

本指南將說明如何使用預測返回功能執行下列操作：

• 選擇啟用預測返回手勢
• 啟用預設系統動畫
• 使用 Navigation Compose 啟用預測返回功能
• 整合共用元素轉換
• 使用 Material Compose 元件支援預測返回功能
• 使用 PredictiveBackHandler 手動存取進度
• 測試預測返回手勢動畫

選擇啟用預測返回手勢

如要啟用預測返回動畫，您必須選擇啟用預測返回手勢。如要選擇採用，請在 AndroidManifest.xml 檔案的 <application> 標記或個別 <activity> 標記中新增 android:enableOnBackInvokedCallback="true。

啟用預設系統動畫

對於已改用支援的返回處理 API 的應用程式，Android 15 以上版本的裝置可提供返回首頁、跨活動和跨工作系統動畫。

• 返回主畫面：將使用者帶回主畫面。
• 跨活動：在應用程式內的活動之間轉換。
• 跨工作：工作之間的轉換。

這些動畫預設會在 Android 15 以上版本中啟用。在搭載 Android 13 或 14 的裝置上，使用者可以透過開發人員選項啟用這些功能。

如要取得系統動畫，請將 AndroidX Activity 依附元件更新至 1.6.0 以上版本。

使用 Navigation Compose 啟用預測返回功能

如要在 Navigation Compose 中使用預測返回手勢，請務必使用 navigation-compose 2.8.0 以上版本的程式庫。

當使用者向後滑動時，Navigation Compose 會自動在畫面之間進行交叉淡出效果：

在導覽時，您可以使用 popEnterTransition 和 popExitTransition 建立自訂轉場效果。套用至 NavHost 時，這些修飾符可讓您定義進入畫面和退出畫面的動畫效果。您可以使用這些效果建立各種效果，例如縮放、淡出或滑動。

在本範例中，scaleOut 會在 popExitTransition 中使用，在使用者返回時縮小退出畫面。此外，transformOrigin 參數會決定縮放動畫的中心點。根據預設，這個值是螢幕的中心 (0.5f, 0.5f)。您可以調整這個值，讓縮放作業從其他位置開始。

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

這個程式碼會產生以下結果：

popEnterTransition 和 popExitTransition 專門用於控制返回堆疊時的動畫，例如透過返回手勢。您也可以使用 enterTransition 和 exitTransition 定義一般進入和離開可組合項的動畫，而不僅限於預測返回。如果您只設定 enterTransition 和 exitTransition，則系統會同時使用這兩者進行一般導覽和彈出返回堆疊。不過，您可以使用 popEnterTransition 和 popExitTransition 為返回導覽建立獨特的動畫。

整合共用元素轉換

共用元素轉場可在含有共用內容的可組合項之間提供流暢的視覺連結，通常用於導覽。

如要搭配 Navigation Compose 使用共用元素，請參閱「使用共用元素的預測返回手勢」。

使用 Material Compose 元件支援預測返回功能

Material Compose 程式庫中的許多元件均可與預測返回手勢完美搭配運作。如要在這些元件中啟用預測返回動畫，請在專案中加入最新的 Material3 依附元件 (androidx.compose.material3:material3-*:1.3.0 以上版本)。

支援預測返回動畫的 Material 元件包括：

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar 和 ModalBottomSheet 會自動顯示預測返回手勢動畫。ModalNavigationDrawer、ModalDrawerSheet、DismissibleDrawerSheet 和 DismissibleNavigationDrawer 需要將 drawerState 傳遞至各自的試算表內容可組合項。

使用 PredictiveBackHandler 手動存取進度

Jetpack Compose 中的 PredictiveBackHandler[5] 可組合函式可讓您攔截返回手勢並存取其進度。您可以即時回應使用者的返回手勢，根據使用者滑動距離建立自訂動畫或行為。

如要使用 PredictiveBackHandler，請務必使用 androidx.activity:activity:1.6.0 以上版本。

PredictiveBackHandler 提供 Flow<BackEventCompat>，可發出代表返回手勢進度的事件。每個事件都包含以下資訊：

• progress：介於 0 和 1 之間的浮點值，表示返回手勢的進度 (0 = 手勢開始，1 = 手勢完成)。
• touchX 和 touchY：觸控事件的 X 和 Y 座標。

以下程式碼片段顯示 PredictiveBackHandler 的基本用法：

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

範例：整合至導覽匣

本範例說明如何使用 PredictiveBackHandler 實作自訂的應用程式內動畫，以便在 JetLagged 中回應返回手勢，與導覽匣建立流暢的互動：

在本範例中，PredictiveBackHandler 用於：

• 追蹤返回手勢的進度。
• 根據手勢進度更新抽屜的 translationX。
• 使用 velocityTracker 時，系統會根據手勢完成或取消時的手勢速度，流暢地開啟或關閉抽屜。

測試預測返回手勢動畫

如果您仍使用 Android 13 或 Android 14，可以測試返回主畫面的動畫。

如要測試這個動畫，請按照下列步驟操作：

1. 在裝置上，依序前往「設定」>「系統」>「開發人員選項」。
2. 選取「預測返回操作動畫」。
3. 啟動更新後的應用程式，然後使用返回手勢查看實際運作情形。

在 Android 15 以上版本中，這項功能預設為啟用。

其他資源

• 新增預測返回動畫程式碼研究室
• Compose 影片中的進階版面配置動畫