使用Provider的Stateful Widget重建场景实际运行异常问题

问题场景 #

我对Flutter有一定了解，但遇到了组件刷新不符合预期的问题：

• 有一个Stateful Widget，包含子组件Graph，初始为null时显示空Container；
• 通过Consumer监听DatabaseProvider的数据，当数据传来时显示Graph组件；
• 但Provider数据更新后，Graph组件始终不刷新，只有给新Graph实例设置不同key时才能触发重建。

原代码示例：

class Name extends StatefulWidget {
  const Name({Key key}) : super(key: key);

  @override
  State<Name> createState() => _NameState();
}

class _NameState extends State<Name> {
  // 注：原代码遗漏了成员变量声明，实际应该在这里定义 Graph currentGraph;
  @override
  Widget build(BuildContext context) {
    Graph currentGraph; // 错误：这里是build内的局部变量，每次build都会重置

    return Consumer<DatabaseProvider>(builder: (context, db, child) {
      setNewModelIfNeeded(db);
      return currentGraph ?? Container();
    });
  }

  setNewModelIfNeeded(db) {
    if(db.graph != currentGraph){
      setState(() {
        currentGraph = db.graph;
      });
    }
  }
}

失效原因拆解 #

1. 变量作用域错误
   原代码中currentGraph是build方法内的局部变量，每次build执行时都会重新初始化。setState更新的变量和build中用来渲染的变量不是同一个，导致渲染逻辑混乱——即使setState触发了重建，build里的currentGraph还是会被重置，这是代码的基础错误。正确的做法是把currentGraph声明为_NameState的成员变量。

2. Flutter组件复用机制
   假设修正作用域后，currentGraph = db.graph是直接赋值同一个Graph实例（而非创建新实例）：

   • Flutter的Element树会根据Widget的类型和key来判断是否复用旧的Element节点。如果前后两次的Graph是同一个实例（类型相同、key相同），Flutter会认为不需要更新，直接复用旧的Element，不会触发组件的重建或数据更新。
   • 如果db.graph只是内部数据变化但实例引用未变，即使调用setState，Flutter也不会感知到Graph需要刷新。

为什么加key能解决问题 #

当你创建新的Graph实例并设置不同的key时：

currentGraph = Graph(copyValuesFrom: db.graph, key: db.graph.toString());

• 新Graph实例的key与旧实例不同，Flutter会认为这是一个全新的Widget，会销毁旧的Element并创建新的Element，从而触发Graph组件的重建，使用最新的数据渲染。

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