Flutter中的didUpdateWidget在initState后立即被调用

Question

根据Flutter文档：

didUpdateWidget在小部件配置更改时调用。

但是，在下面的代码中，didUpdateWidget会在第一次立即在initState之后被调用。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  @override
  void initState() {
    print("initState called");
    super.initState();
  }

  @override
  void didUpdateWidget(Test oldWidget) {
    print("didUpdateWidget called");
    super.didUpdateWidget(oldWidget);
  }

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


// output
//
// initState called
// didUpdateWidget called

有人能描述一下为什么会出现这种情况吗？我应该如何比较整个 oldWidget 和 widget？

谢谢

更新
正如 @pskink 提到的那样，didUpdateWidget 并不是在 initState 后立即被调用，而是在第一次 build 之后。

还有一个问题是为什么在以下代码中它会在第一次构建后被调用：

    print("didUpdateWidget called");   <--
    super.didUpdateWidget(oldWidget);  <--

但如果我在super.didUpdateWidget(oldWidget);之后调用print，它就能正常工作。

- Pars

---

嗨。请将代码复制并粘贴到Flutter项目中，您会看到它被调用。 - Pars

是的，你说得对，但为什么在第一次构建后会调用didUpdateWidget呢？小部件没有任何更改啊！ - Pars

是的，我已经知道了，但在这个简单的例子中没有父部件，但是didUpdateWidget被调用了。 - Pars

你将 print 行与 super.didUpdateWidget 交换了位置，现在它按预期工作了。这意味着在 super.didUpdateWidget 之前的任何内容都会在第一次构建后立即运行。感谢您的时间和回复。 - Pars

只需在dartpad.dartlang.org中的代码中首先调用print，您就会看到在第一次构建后调用了“didUpdateWidget”方法。 - Pars

Answer 1

在使用Flutter 2.10.1稳定版本进行测试时，只有在调用setState()更新小部件上显示的数据后，才会调用didUpdateWidget。这种行为与文档中提到的描述相匹配，其中didUpdateWidget方法在小部件配置更改时被调用。在调用didUpdateWidget方法之后，将调用build。

下面是在调用setState()一次后可能出现的流程。

1. initState()
2. build()
3. 调用setState()
4. didUpdateWidget()
5. build()

可以在这个简单的Flutter应用程序上复制这个过程。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    debugPrint('State initState');
    super.initState();
  }


  @override
  void didUpdateWidget(MyHomePage oldWidget) {
    debugPrint('State didUpdateWidget');
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    debugPrint('State Widget build');
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

- Omatt