Flutter 颤振：检测小部件之间的状态转换

在flatter中，是否有一种方法可以在推送或弹出小部件时检测小部件的背景和前景状态

例如： 假设有两个小部件A和B

从小部件A启动小部件B。在这种情况下，将小部件A的状态检测为背景，将小部件B的状态检测为前景

类似地，当从窗口小部件B按下后，窗口小部件A的状态应被检测为前台。

作为一个选项

创建RouteObserver

将其分配给

MaterialApp

NavigatorObserver

属性

将RouteAware混合添加到每个必须观看的页面

覆盖必要的方法，如

didPush

didPopNext

ext

利润

这是一个完整的示例，我对其进行了简化，使RouteAware混合只添加到第一页

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver],
      home: Scaffold(
        appBar: AppBar(),
        body: FirstPage(),
      ),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> with RouteAware {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => routeObserver.subscribe(this, ModalRoute.of(context)));
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('PRESS ME'),
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
        },
      ),
    );
  }

  @override
  void didPush() {
    print('didPush FirstPage');
  }

  @override
  void didPopNext() {
    print('didPopNext FirstPage');
  }

  @override
  void didPop() {
    print('didPop FirstPage');
  }

  @override
  void didPushNext() {
    print('didPushNext FirstPage');
  }

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

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('BACK'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

当你们按下按钮，然后按下返回按钮，它将在控制台打印

I/flutter ( 7188): didPush FirstPage
I/flutter ( 7188): didPushNext FirstPage
I/flutter ( 7188): didPush SecondPage
I/flutter ( 7188): didPopNext FirstPage
I/flutter ( 7188): didPop SecondPage

---

Navigator.push

返回一个

Future

，当从堆栈中弹出给定路由时，它将完成。取决于你想要实现什么，这可能会更容易。你知道为什么一次推两条路线不起作用吗？看到我的问题了吗

I/flutter ( 7188): didPush FirstPage
I/flutter ( 7188): didPushNext FirstPage
I/flutter ( 7188): didPush SecondPage
I/flutter ( 7188): didPopNext FirstPage
I/flutter ( 7188): didPop SecondPage