Jetpack Compose 可重用可组合的伴奏导航动画

Question

中使用导航动画

有以下几种使用方式

AnimatedNavHost(navController, startDestination, Modifier.padding(paddingValues)) {

        composable("greet",
            enterTransition = { // push
                slideIntoContainer(AnimatedContentScope.SlideDirection.Left, animationSpec = tween(400))
            },
            popExitTransition = { // pop
                slideOutOfContainer(AnimatedContentScope.SlideDirection.Right, animationSpec = tween(300))
            },

            exitTransition = {
                slideOutOfContainer(AnimatedContentScope.SlideDirection.Left, animationSpec = tween(400))
            },
            popEnterTransition = {
                slideIntoContainer(AnimatedContentScope.SlideDirection.Right, animationSpec = tween(350))
            }

        ) { GreetView(navController) }

}

由于composable中的定义都是一样的，我如何重用composable。

简化如下：

AnimatedNavHost() {

        composable("greet") {
                // ...
        }
}

Answer 1

您可以使用接收器 NavGraphBuilder 创建一个扩展函数，您可以在其中 pre-populate 所有转换，只需添加将更改的部分。

这是基于您的问题的示例。

@OptIn(ExperimentalAnimationApi::class)
fun NavGraphBuilder.composable(
    route: String,
    content: @Composable () -> Unit,
) {

    val enterTransition =
        slideIntoContainer(AnimatedContentScope.SlideDirection.Left, animationSpec = tween(400))

    val exitTransition =
        slideOutOfContainer(AnimatedContentScope.SlideDirection.Left, animationSpec = tween(400))

    val popExitTransition =
        slideOutOfContainer(AnimatedContentScope.SlideDirection.Right, animationSpec = tween(300))

    val popEnterTransition =
        slideIntoContainer(AnimatedContentScope.SlideDirection.Right, animationSpec = tween(350))

    composable(
        route = route,
        enterTransition = { _, _ ->
            enterTransition
        },
        popEnterTransition = { _, _ ->
            popEnterTransition
        },
        popExitTransition = { _, _ ->
            popExitTransition
        },
        exitTransition = { _, _ ->
            exitTransition
        }
    ) {
        content()
    }
}

现在您可以继续在导航图中使用它，

composable("greet"){

}

当您从导航图中键入 composable 时，Android Studio 可能会尝试使用默认值，因此您应确保使用的是扩展函数。为了简化它，您可以将扩展函数从 composable 重命名为其他名称。

Jetpack Compose 可重用可组合的伴奏导航动画

Jetpack Compose Accompanist Navigation Animation in Reuse composable

navigation

android-jetpack-compose