使用appbar后退按钮Flutter返回页面时Build（）不会再次运行答案

【问题标题】：Build() doesn't run again when returning to a page using the appbar back button, Flutter使用appbar后退按钮Flutter返回页面时Build（）不会再次运行
【发布时间】：2020-08-06 23:11:16
【问题描述】：

我正在尝试让下面的应用在从其他页面之一返回主页时打印 Build。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  initialRoute: '/Home',
  routes: {
    '/Home': (context) => Home(),
    '/First': (context) => First(),
    '/Second': (context) => Second(),
  },
),);


class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
    print('Initialisation');
  }
  @override
  Widget build(BuildContext context) {
    print('Build');
    return Scaffold(
      appBar: AppBar(title: Text('Homepage')),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/First');
          },
          child: Text('Move to the first page'),
        ),
      ),
    );
  }
}

class First extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First')),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamedAndRemoveUntil(context, '/Second', ModalRoute.withName('/Home'));
          },
          child: Text('Move to the second page'),
        ),
      ),
    );
  }
}

class Second extends StatefulWidget {
  @override
  _SecondState createState() => _SecondState();
}

class _SecondState extends State<Second> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second')),
    );
  }
}

现在我正在考虑是否可以编辑 AppBar() 小部件的 leading 方面，以便发生这种情况，但我真的不确定。非常感谢您抽出宝贵时间以及您可能提出的任何建议。

【问题讨论】：

initState 只会对每个创建的对象只运行一次。因为当你点击返回上一页时，它已经创建好了，它永远不会再次触发initState
好的，那么当我返回该页面时如何让“build”打印出来？
api.flutter.dev/flutter/widgets/RouteObserver-class.html
对不起，关于 RouteObservers 的文献并不多，我不太明白。我确信我可以自己弄清楚如何实现它们，但我真的不明白它们是如何被使用的。你建议我如何使用它们？
使用您希望在小部件路由堆栈更改并且小部件最终位于顶部时执行的代码覆盖didPush 和didPopNext。例如调用setState(() => {}) 重建小部件

标签： flutter dart

【解决方案1】：

这是设计使然 - 当您创建一个“页面”并在其顶部推送另一个页面，然后弹出新页面时，您希望下面的页面具有与以前相同的状态但处理结果流行音乐。

为此，您可以等待调用Navigator.pushNamed 的结果。

看起来像这样：

onPressed:: () async {
  final result = await Navigator.pushNamed(context, '/First');
  // this will be after popping back to this page
  print("pop result: $result");
}

需要注意的一点是，在弹出后的 onPressed 部分中，您的代码可能在构建周期中运行，因此您需要确保如果您调用 setState 或 Navigator.push 或任何类似的事情，您都可以在推迟第一次运行后执行。

您可以通过等待延迟的未来或使用调度程序来做到这一点

... 
await Future.delayed(Duration.zero);
(your code here)

或者，

SchedulerBinding.instance.addPostFrameCallback((duration) => (your code here))

【讨论】：