You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

请问是否存在处理屏幕间侧滑返回的回调函数?

当然有啦!不同的移动开发平台都提供了对应的回调函数来监听侧滑返回(包括边缘侧滑触发的页面返回)的动作,下面我按主流平台给你整理具体的实现方式:

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 08:46:49