Flutter中如何检测页面进入事件？有没有类似ionViewWillEnter的回调？

Flutter没有内置和IONIC的ionViewWillEnter完全同名的生命周期钩子，但可以通过官方提供的路由感知能力实现完全等效的效果，且比Navigator.push().then()的调用方式更易维护：

注：initState仅在页面第一次初始化创建时触发，如果页面已经在路由栈中，从其他页面回退到当前页、或者切换缓存页时initState不会执行，不符合「每次进入页面都触发」的要求。

方案1：使用官方RouteObserver + RouteAware（最推荐，无第三方依赖） #

这是Flutter官方提供的原生路由监听方案，可以精准覆盖所有页面进入场景：

• 第一步：全局注册路由观察者

// 全局位置定义路由观察者实例
final RouteObserver<ModalRoute<void>> routeObserver = RouteObserver<ModalRoute<void>>();

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 注册到MaterialApp的导航观察者列表
      navigatorObservers: [routeObserver],
      home: const HomePage(),
    );
  }
}

• 第二步：在目标页面绑定监听，重写进入回调

class TargetPage extends StatefulWidget {
  const TargetPage({super.key});

  @override
  State<TargetPage> createState() => _TargetPageState();
}

class _TargetPageState extends State<TargetPage> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 绑定当前页面到路由观察者
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // 页面销毁前解绑监听
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  // 页面首次被Push进路由栈时触发
  @override
  void didPush() {
    super.didPush();
    _handlePageEnter();
  }

  // 路由栈中上层页面被Pop，当前页面重新可见时触发
  @override
  void didPopNext() {
    super.didPopNext();
    _handlePageEnter();
  }

  // 统一的页面进入逻辑
  void _handlePageEnter() {
    // 此处写入每次进入页面需要执行的代码
    debugPrint("页面进入，等效ionViewWillEnter");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text("目标页面")));
  }
}

方案2：封装通用Mixin简化重复代码 #

如果多页面需要用到进入监听，可以把绑定逻辑封装成通用Mixin，使用时无需重复写注册解绑代码：

mixin ViewWillEnterMixin<T extends StatefulWidget> on State<T> {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush() {
    super.didPush();
    onViewWillEnter();
  }

  @override
  void didPopNext() {
    super.didPopNext();
    onViewWillEnter();
  }

  /// 子类重写该方法实现进入逻辑
  void onViewWillEnter();
}

使用示例：

class TargetPageState extends State<TargetPage> with ViewWillEnterMixin {
  @override
  void onViewWillEnter() {
    // 直接写入进入页面的逻辑即可
    debugPrint("页面进入触发");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

方案3：第三方框架适配（可选） #

如果你已经在项目中使用GetX等路由框架，也可以直接用框架内置的生命周期能力：

• GetX框架中，每次进入页面初始化GetxController时都会触发onInit方法，页面渲染完成后会触发onReady方法，符合进入页面监听的需求。

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