请问是否存在处理屏幕间侧滑返回的回调函数?
当然有啦!不同的移动开发平台都提供了对应的回调函数来监听侧滑返回(包括边缘侧滑触发的页面返回)的动作,下面我按主流平台给你整理具体的实现方式:
iOS (Swift)
在iOS中,系统自带的导航控制器UINavigationController可以通过代理方法来监听页面切换(包括侧滑返回)的完成事件:
- 实现
UINavigationControllerDelegate协议,重写navigationController(_:didShow:animated:)方法,这个方法会在页面切换完成后触发,你可以在这里判断是否是侧滑返回的场景:
class YourViewController: UIViewController, UINavigationControllerDelegate { override func viewDidLoad() { super.viewDidLoad() navigationController?.delegate = self } func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) { // 判断当前页面是否是被侧滑返回后的目标页面 if viewController == self.previousViewController { // 这里处理侧滑返回后的逻辑 print("侧滑返回完成啦!") } } private var previousViewController: UIViewController? { guard let viewControllers = navigationController?.viewControllers else { return nil } let index = viewControllers.firstIndex(of: self) ?? 0 return index > 0 ? viewControllers[index - 1] : nil } }
如果是自定义的侧滑手势(比如自己添加的UIScreenEdgePanGestureRecognizer),可以直接给手势添加回调:
let edgeGesture = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(handleSideSwipe(_:))) edgeGesture.edges = .left view.addGestureRecognizer(edgeGesture) @objc private func handleSideSwipe(_ gesture: UIScreenEdgePanGestureRecognizer) { if gesture.state == .ended { // 侧滑手势结束,处理返回逻辑 navigationController?.popViewController(animated: true) // 这里添加你需要的回调逻辑 print("自定义侧滑返回触发!") } }
Android (Kotlin)
Android中,针对侧滑返回(通常是系统或第三方库实现的滑动返回),可以通过以下方式监听:
- 使用
OnBackPressedCallback来监听返回事件(包括侧滑触发的返回),这个是Jetpack组件推荐的方式:
class YourFragment : Fragment() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val callback = object : OnBackPressedCallback(true) { override fun handleOnBackPressed() { // 这里处理侧滑返回的逻辑 Log.d("SwipeBack", "侧滑返回触发啦!") // 如果需要默认的返回行为,调用remove()然后让系统处理 remove() requireActivity().onBackPressedDispatcher.onBackPressed() } } requireActivity().onBackPressedDispatcher.addCallback(this, callback) } }
如果是使用第三方滑动返回库(比如AndroidSwipeBackLayout),通常库本身会提供对应的回调接口,比如:
swipeBackLayout.setSwipeBackListener(object : SwipeBackLayout.SwipeBackListener { override fun onScrollStateChanged(state: Int, scrollPercent: Float) {} override fun onEdgeTouch(edgeFlag: Int) {} override fun onScrollOverThreshold() { // 侧滑超过阈值,触发返回 Log.d("SwipeBack", "侧滑返回完成!") } })
Flutter
Flutter中,现在推荐使用PopScope组件来监听页面弹出(包括侧滑返回)的事件,替代旧的WillPopScope:
class YourPage extends StatelessWidget { @override Widget build(BuildContext context) { return PopScope( canPop: true, // 允许弹出 onPopInvoked: (didPop) { if (didPop) { // 侧滑返回已经完成,这里处理逻辑 print("侧滑返回完成!"); } }, child: Scaffold( appBar: AppBar(title: Text("测试页面")), body: Center(child: Text("侧滑返回测试")), ), ); } }
如果需要在返回前做拦截(比如询问用户是否确定返回),可以在onPopInvoked里处理,或者结合Navigator的回调。
React Native
在React Native中,如果你使用react-navigation,可以通过以下方式监听侧滑返回:
- 使用
useFocusEffect来监听页面失去焦点(侧滑返回后当前页面会失去焦点):
import { useFocusEffect } from '@react-navigation/native'; import React from 'react'; import { View, Text } from 'react-native'; function YourScreen() { useFocusEffect( React.useCallback(() => { return () => { // 页面失去焦点,说明侧滑返回触发了 console.log("侧滑返回完成!"); }; }, []) ); return ( <View> <Text>侧滑返回测试页面</Text> </View> ); }
另外,也可以监听navigation的beforeRemove事件,在返回前做处理:
React.useEffect(() => { const unsubscribe = navigation.addListener('beforeRemove', (e) => { // 这里可以拦截返回,或者处理回调逻辑 console.log("侧滑返回即将触发!"); // 如果需要允许返回,不要调用e.preventDefault() }); return unsubscribe; }, [navigation]);
内容的提问来源于stack exchange,提问作者Samuel Sunny Wilson
相关产品推荐
相关产品推荐

