Compose Multiplatform（Android/iOS）拦截返回操作并实现退出前弹窗

核心思路 #

利用Compose Multiplatform的expect/actual机制，定义跨平台的返回拦截接口，再针对Android和iOS分别实现平台特定的返回事件拦截逻辑，最后在通用Compose代码中配合对话框完成确认流程。

步骤1：定义跨平台通用接口 #

在commonMain模块中声明两个跨平台接口：一个用于注册返回拦截回调，另一个用于执行实际的页面返回操作。

// commonMain/kotlin/com/example/BackInterop.kt
expect class BackInterceptor {
    /**
     * 注册返回拦截回调
     * @return true 表示拦截返回操作，false 表示允许默认返回
     */
    fun onBackPressed(block: () -> Boolean)
}

expect fun navigateBack()

步骤2：Android端实现 #

Android端直接复用Jetpack Compose的BackHandler组件，处理物理返回键和系统导航手势的返回事件：

// androidMain/kotlin/com/example/BackInterop.kt
import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
import androidx.compose.material.BackHandler

actual class BackInterceptor {
    actual fun onBackPressed(block: () -> Boolean) {
        BackHandler(enabled = true) {
            if (!block()) {
                // 回调返回false时，执行系统默认返回逻辑
                LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher?.onBackPressed()
            }
        }
    }
}

actual fun navigateBack() {
    LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher?.onBackPressed()
}

步骤3：iOS端实现 #

iOS需要处理导航栏返回按钮、侧滑返回手势两种场景，通过UIKit的API拦截这些事件：

// iosMain/kotlin/com/example/BackInterop.kt
import UIKit
import androidx.compose.ui.platform.ComposeUIViewController
import kotlinx.cinterop.ObjCAction
import kotlinx.cinterop.blockObjC
import kotlinx.cinterop.imp_implementationWithBlock
import kotlinx.cinterop.objcClass
import objc.runtime.class_addMethod
import objc.runtime.class_getInstanceMethod
import objc.runtime.class_replaceMethod
import objc.runtime.method_getImplementation
import objc.runtime.method_getTypeEncoding

actual class BackInterceptor {
    actual fun onBackPressed(block: () -> Boolean) {
        val rootVC = UIApplication.shared.keyWindow?.rootViewController as? ComposeUIViewController
        rootVC?.let { vc ->
            // 替换导航栏默认返回按钮，自定义点击逻辑
            vc.navigationItem.leftBarButtonItem = UIBarButtonItem(
                title = "返回",
                style = .plain,
                target = vc,
                action = NSSelectorFromString("handleBackTap:")
            )
            
            // 拦截侧滑返回手势
            vc.navigationController?.interactivePopGestureRecognizer?.delegate = object : UIGestureRecognizerDelegate {
                override fun gestureRecognizerShouldBegin(gestureRecognizer: UIGestureRecognizer): Boolean {
                    return !block() // 回调返回true时，阻止手势触发
                }
            }
            
            // 给ComposeUIViewController添加返回按钮点击处理方法
            vc.addBackTapHandler(block)
        }
    }
    
    private fun ComposeUIViewController.addBackTapHandler(block: () -> Boolean) {
        val method = class_getInstanceMethod(this.objcClass, NSSelectorFromString("handleBackTap:")) ?: run {
            val imp = imp_implementationWithBlock(
                blockObjC { _, _ ->
                    if (!block()) {
                        this.navigationController?.popViewController(animated = true)
                    }
                }
            )
            class_addMethod(
                this.objcClass,
                NSSelectorFromString("handleBackTap:"),
                imp,
                "v@:@"
            )
            class_getInstanceMethod(this.objcClass, NSSelectorFromString("handleBackTap:"))
        }
        method?.let {
            class_replaceMethod(this.objcClass, NSSelectorFromString("handleBackTap:"), method_getImplementation(it), method_getTypeEncoding(it))
        }
    }
}

actual fun navigateBack() {
    UIApplication.shared.keyWindow?.rootViewController?.navigationController?.popViewController(animated = true)
}

步骤4：在通用Compose代码中使用 #

在需要拦截返回的页面中，实例化BackInterceptor，注册拦截回调，并通过状态控制确认对话框的显示：

// commonMain/kotlin/com/example/MyScreen.kt
import androidx.compose.foundation.layout.Column
import androidx.compose.material.AlertDialog
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun MyScreen() {
    val showConfirmDialog = remember { mutableStateOf(false) }
    val backInterceptor = BackInterceptor()

    // 注册返回拦截逻辑
    backInterceptor.onBackPressed {
        showConfirmDialog.value = true
        true // 拦截默认返回操作
    }

    // 确认对话框
    if (showConfirmDialog.value) {
        AlertDialog(
            onDismissRequest = { showConfirmDialog.value = false },
            title = { Text("确认退出") },
            text = { Text("确定要离开当前页面吗？") },
            confirmButton = {
                Button(onClick = {
                    showConfirmDialog.value = false
                    navigateBack() // 用户确认后执行返回
                }) {
                    Text("确定")
                }
            },
            dismissButton = {
                Button(onClick = { showConfirmDialog.value = false }) {
                    Text("取消")
                }
            }
        )
    }

    // 页面内容
    Column {
        Text("当前页面内容")
    }
}

注意事项 #

• iOS端的侧滑拦截仅对导航栈顶层页面生效，避免影响其他页面的手势逻辑。
• Android端的BackHandler会自动处理物理返回键和系统导航手势的返回事件。
• 若页面使用自定义导航框架，需调整navigateBack的实现以匹配框架的返回逻辑。

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