Compose 中的预测性返回

预测性返回是一项手势导航功能，可让用户预览返回滑动操作将其带到的位置。预测性返回功能可与 Compose 无缝集成，以提升应用的导航体验。用户在应用内导航返回时，可以享受更流畅、更直观的转换。图 1 显示了此功能在 SociaLite 示例应用中的运作方式。

本指南介绍了如何使用预测性返回执行以下操作：

• 选择启用预测性返回手势
• 启用默认系统动画
• 使用 Navigation Compose 启用预测性返回
• 与共享元素转换集成
• 使用 Material Compose 组件支持预测性返回
• 使用 PredictiveBackHandler 手动访问进度
• 测试预测性返回手势动画

选择启用预测性返回手势

如需启用预测性返回动画，您必须选择启用对预测性返回手势的支持。如需启用新样式，请将 android:enableOnBackInvokedCallback="true 添加到 AndroidManifest.xml 文件中的 <application> 标记或各个 <activity> 标记。

启用默认系统动画

在 Android 15 及更高版本的设备上，已迁移到受支持的返回处理 API 的应用可使用“返回主屏幕”“跨 activity”和“跨任务”系统动画。

• 返回主屏幕：将用户返回主屏幕。
• 跨 activity：应用内 activity 之间的转换。
• 跨任务：任务之间的转换。

在 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 及更高版本中，此功能默认处于启用状态。

其他资源

• “添加预测性返回动画”Codelab
• “Compose 中的高级布局动画”视频