主页 / coding / 问题 / 79076768
Accepted
Pawandeep Singh
Asked: 2024-10-11 12:01:16 +0800 CST

如何在 Compose 中从左向右滑动页面？

  • 772

我如何在 Jetpack Compose 中做到这一点，当用户单击列表中的项目时，屏幕从右侧滑入，显示数据并在从左到右滑动时关闭？

这是通过导航到新屏幕或对可组合项进行动画处理来实现的吗？

我需要逻辑或者简单的代码来解释其工作原理。

在此处输入图片描述

2 个回答

  1. Best Answer

    是的，您可以使用幻灯片过渡来实现这一点。您可以使用这个基本想法来实现相同的效果，即单击项目时从左侧滑入并再次滑回以显示详细信息屏幕。

    class SlideTransitionExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    val navController = rememberNavController()

    NavHost(navController, startDestination = "screen1") {
        composable(
            route = "screen1",
            enterTransition = {
                when (initialState.destination.route) {
                    "screen2" ->
                        slideIntoContainer(
                            SlideDirection.Left,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            },
            exitTransition = {
                when (targetState.destination.route) {
                    "screen2" ->
                        slideOutOfContainer(
                            SlideDirection.Left,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            },
            popEnterTransition = {
                when (initialState.destination.route) {
                    "screen2" ->
                        slideIntoContainer(
                            SlideDirection.Right,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            },
            popExitTransition = {
                when (targetState.destination.route) {
                    "screen2" ->
                        slideOutOfContainer(
                            SlideDirection.Right,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            }
        ) {
            Screen1(navController)
        }

        composable(
            route = "screen2",
            enterTransition = {
                when (initialState.destination.route) {
                    "screen1" ->
                        slideIntoContainer(
                            SlideDirection.Left,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            },
            exitTransition = {
                when (targetState.destination.route) {
                    "screen1" ->
                        slideOutOfContainer(
                            SlideDirection.Left,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            },
            popEnterTransition = {
                when (initialState.destination.route) {
                    "screen1" ->
                        slideIntoContainer(
                            SlideDirection.Right,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            },
            popExitTransition = {
                when (targetState.destination.route) {
                    "screen1" ->
                        slideOutOfContainer(
                            SlideDirection.Right,
                            animationSpec = tween(700)
                        )
                    else -> null
                }
            }
        ) {
            Screen2(navController)
        }
    }
}

@Composable
fun Screen1(navController: NavHostController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("This is Screen 1")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { navController.navigate("screen2") }) {
            Text("Go to Screen 2")
        }
    }
}

@Composable
fun Screen2(navController: NavHostController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("This is Screen 2")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { navController.popBackStack() }) {
            Text("Go Back to Screen 1")
        }
    }
}

    示例有两个屏幕，每个屏幕都有一个按钮。单击按钮将导航和弹出屏幕。每个进入、退出和弹出都根据目标路线进行动画处理。

    • 1 
  2. composable(route = Screen.HomeScreen.route,
        enterTransition = {
            slideInHorizontally(
                initialOffsetX = { 1000 },
                animationSpec = tween(500)
            )
        },
        exitTransition = {
            slideOutHorizontally(
                targetOffsetX = { -1000 },
                animationSpec = tween(500)
            )
        },
        popEnterTransition = {
            slideInHorizontally(
                initialOffsetX = { -1000 },
                animationSpec = tween(500)
            )
        },
        popExitTransition = {
            slideOutHorizontally(
                targetOffsetX = { 1000 },
                animationSpec = tween(500)
            )
        }
    ) {
        HomeScreen(navController)
    }

    如果您不想让过渡效果出现在整个应用屏幕中，只需将过渡效果添加到可组合项中即可。如果您希望它们出现在整个应用中，请在导航主机图中添加过渡效果。

    • 1

相关问题