Flutter之didUpdateWidget()的触发时机

在 Flutter 中，didUpdateWidget() 方法用于处理与父 widget 相关的更新。当父 widget 重建并向当前 widget 传递新的配置（即新的 widget 实例）时，didUpdateWidget() 会被调用。以下是一个简单的示例，演示了如何在一个自定义 StatefulWidget 中使用 didUpdateWidget() 来检测 widget 属性的变化，并相应地做出反应。

示例说明

假设有一个简单的 CounterWidget，它接受一个 count 值。我们希望每次父 widget 更新这个 count 值时，CounterWidget 都能通过 didUpdateWidget() 捕捉到这个变化并打印出相关信息。

Step 1: 创建一个 StatefulWidget

首先，创建一个名为 CounterWidget 的 StatefulWidget：

class CounterWidget extends StatefulWidget {
  final int count;

  const CounterWidget({Key? key, required this.count}) : super(key: key);

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Text('Count: ${widget.count}', style: TextStyle(fontSize: 24)),
    );
  }

  @override
  void didUpdateWidget(covariant CounterWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.count != oldWidget.count) {
      print("Count has been updated from ${oldWidget.count} to ${widget.count}");
    }
  }
}

Step 2: 在父 Widget 中使用 CounterWidget

然后，在应用的其他部分（例如在 main.dart 中的主页面）使用这个 CounterWidget 并提供一个更新 count 的方法：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('didUpdateWidget Demo')),
      body: Center(
        child: CounterWidget(count: _counter),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

示例的工作原理

在这个示例中：

• CounterWidget 定义了一个 didUpdateWidget() 方法，该方法检查 count 属性是否已更改，并在控制台打印出更改。
• MyHomePage 包含一个 CounterWidget 和一个按钮，每次按钮被点击时都会增加 _counter 的值并通过 setState() 触发重建。
• 每次 _counter 值变化时，都会重新构建 MyHomePage 并传递新的 count 值给 CounterWidget，导致 CounterWidget 的 didUpdateWidget() 被调用。

这个示例展示了如何使用 didUpdateWidget() 捕捉到父 widget 传递的新属性值，并可以在这个方法内部执行一些特定的逻辑，如更新状态、重新配置资源或打印调试信息。这种方法在处理动态数据时非常有用，特别是在需要响应来自父 widget 属性变化的情况下。