向右滑动可返回撰写内容

Question

在我的 Android 应用程序中，我在惰性列中显示数据，当用户单击列表中的一项时，它会导航到新屏幕（“B”），当用户按回键时，它会导航回来。到这里为止效果都很好。 我实现了向后滑动功能，用户在屏幕 B 上从左向右滑动屏幕，一旦用户滑动屏幕超过设备屏幕的一半，屏幕就会向右移动，屏幕将关闭并导航回来。

问题是，用户通过滑动导航返回时会看到一个空白屏幕，然后是主屏幕。

当用户向右滑动时，主屏幕如何在下面可见。

我想实现这个行为-

我的代码的作用是这样的 -

代码-

 @Composable
fun App() {

    val navController = rememberNavController()

    MainScreen(
        navController = navController,
    ) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = NavScreen.Home.route,
            enterTransition = { fadeIn() },
            exitTransition = { fadeOut() }
        ) {
            composable(NavScreen.Home.route) {
                MainScreen(innerPadding = innerPadding, navController = navController)
            }
            composable(
                route = NavScreen.Preview.route,
                enterTransition = {
                    slideIntoContainer(
                        AnimatedContentTransitionScope.SlideDirection.Right,
                        animationSpec = tween(300)
                    )
                },
                exitTransition = {
                    slideOutOfContainer(
                        AnimatedContentTransitionScope.SlideDirection.Left,
                        animationSpec = tween(50)
                    )
                },
                popEnterTransition = {
                    fadeIn(animationSpec = tween(50))
                },
                popExitTransition = {
                    slideOutOfContainer(
                        AnimatedContentTransitionScope.SlideDirection.Right,
                        animationSpec = tween(300)
                    )
                }
            ) {
                PreviewScreen(
                    innerPadding = innerPadding,
                    navController = navController
                )
            }
}
}
}

主屏幕 -

    @Composable
fun MainScreen(
    innerPadding: PaddingValues,
    navController: NavController,
) {
        LazyColumn(
            state = rememberLazyListState(),
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
                .padding(top = innerPadding.calculateTopPadding())
        )
        {
            items(120) {
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .padding(top = 5.dp, start = 2.dp, end = 2.dp)
                        .clickable {
                            navController.navigate(NavScreen.Preview.route)
                        },
                    elevation = CardDefaults.cardElevation(15.dp),
                    colors = CardDefaults.cardColors(Color.White)
                ) {
                    Text(text = "Hello $it")
                }
            }
        }
    }
}

预览画面-

 @Composable
fun PreviewScreen(
    innerPadding: PaddingValues,
    navController: NavController,
) {
    val offsetX = remember { Animatable(0f) }
    val coroutineScope = rememberCoroutineScope()
    var componentWidth by remember { mutableIntStateOf(0) }
    var isDragging by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .zIndex(1f)  // Keep this above the main screen during swipe
            .padding(innerPadding)
            .offset { IntOffset(offsetX.value.roundToInt(), 0) }
            .pointerInput(Unit) {
                detectHorizontalDragGestures(
                    onDragStart = { offset ->
                        isDragging = offset.x <= componentWidth * 0.15f
                    },
                    onDragEnd = {
                        if (isDragging) {
                            coroutineScope.launch {
                                if (offsetX.value > componentWidth / 2f) {
                                   
                                    navController.popBackStack()
                                } else {
                                    offsetX.animateTo(
                                        0f,
                                        animationSpec = tween(durationMillis = 300)
                                    )
                                }
                            }
                        }
                        isDragging = false
                    },
                    onDragCancel = {
                        isDragging = false
                    }
                ) { change, dragAmount ->
                    if (isDragging) {
                        change.consume()
                        coroutineScope.launch {
                            offsetX.snapTo(
                                (offsetX.value + dragAmount).coerceIn(
                                    0f,
                                    componentWidth.toFloat()
                                )
                            )
                        }
                    }
                }
            }
            .layout { measurable, constraints ->
                val placeable = measurable.measure(constraints)
                componentWidth = placeable.width
                layout(placeable.width, placeable.height) {
                    placeable.place(0, 0)
                }
            }
    ) {
        Column(
            Modifier
                .fillMaxSize()
                .background(Color.Green)
                .padding(horizontal = 5.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Hello", fontSize = 20.sp)
        }
    }
}

Answer 1

您可以使用HorizontalPager制作的TabLayout。检查这个：https://www.geeksforgeeks.org/tab-layout-in-android-using-jetpack-compose/