如何在Compose Multiplatform中实现iOS原生风格侧滑返回手势？

有两种可行方案可以实现类似iOS的侧滑返回手势，下面分别说明：

方案一：自定义滑动手势（无需第三方依赖） #

利用Jetpack Compose自带的swipeable Modifier实现侧滑逻辑，直接在详情页添加手势监听：

@Composable
fun DetailScreen(navController: NavController, itemId: String?) {
    // 记录滑动状态，0代表初始位置，1代表滑动完成触发返回
    val swipeableState = rememberSwipeableState(initialValue = 0)
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp

    Box(
        modifier = Modifier
            .fillMaxSize()
            // 设置滑动参数：水平方向、锚点从0到屏幕宽度、滑动超过20%触发状态变更
            .swipeable(
                state = swipeableState,
                anchors = mapOf(0f to 0, screenWidth.toPx() to 1),
                thresholds = { _, _ -> FractionalThreshold(0.2f) },
                orientation = Orientation.Horizontal
            )
            // 根据滑动偏移量实时更新屏幕位置
            .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
    ) {
        // 原有详情页内容
        Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
            Text(text = "详情页 ID：$itemId", fontSize = 20.sp)
            Button(onClick = { navController.popBackStack() }) {
                Text("手动返回")
            }
        }
    }

    // 监听滑动状态，当状态变为1时执行返回操作
    LaunchedEffect(swipeableState.currentValue) {
        if (swipeableState.currentValue == 1) {
            navController.popBackStack()
        }
    }
}

这个方案的核心是通过swipeable跟踪滑动进度，当滑动距离超过屏幕宽度的20%时，触发返回栈操作，同时带动屏幕跟随手势偏移，模拟iOS的侧滑视觉效果。

方案二：使用Accompanist第三方库简化实现 #

如果不想自己处理手势细节，可以使用Google官方维护的Accompanist库中的侧滑返回功能，步骤如下：

1. 先添加依赖（注意替换为最新版本）：

// build.gradle.kts 或 build.gradle
implementation "com.google.accompanist:accompanist-navigation-animation:<最新版本号>"

2. 替换NavHost为AnimatedNavHost，并给详情页添加滑动动画和侧滑手势：

val navController = rememberAnimatedNavController()

AnimatedNavHost(
    navController = navController,
    startDestination = "home"
) {
    composable("home") {
        HomeScreen(navController)
    }
    composable(
        route = "details/{itemId}",
        // 设置页面切换的动画，模拟iOS的滑动效果
        enterTransition = { slideInHorizontally(initialOffsetX = { it }) + fadeIn() },
        exitTransition = { slideOutHorizontally(targetOffsetX = { -it }) + fadeOut() },
        popEnterTransition = { slideInHorizontally(initialOffsetX = { -it }) + fadeIn() },
        popExitTransition = { slideOutHorizontally(targetOffsetX = { it }) + fadeOut() }
    ) { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        Box(
            modifier = Modifier
                .fillMaxSize()
                // 启用侧滑返回手势
                .swipeToPop(navController)
        ) {
            DetailScreen(navController, itemId)
        }
    }
}

Accompanist的swipeToPop已经封装好了手势逻辑，配合页面切换动画可以更贴近iOS的交互体验。

注意事项 #

• 如果页面内有横向滑动控件（比如HorizontalPager），需要处理手势冲突，可通过限制侧滑手势只在屏幕左侧边缘触发，或者在滑动控件区域禁用侧滑。
• 自定义方案中可以根据需求调整滑动阈值（比如从20%改为30%），优化触发返回的灵敏度。

内容的提问来源于stack exchange，提问作者WP7