InheritWidget原理解析

先上代碼

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InheritWidget',
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: TestWidget(),
        ),
      ),
    );
  }
}

class TestWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TestWidgetState();
  }
}

class TestWidgetState extends State<TestWidget> {
  String text = "init";

  @override
  Widget build(BuildContext context) {
    return CustomInheritedWidget(
      text: text,//1
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          InheritedWidgetChild(),
          RaisedButton(
            onPressed: () {
              setState(() {
                text = "modify";//2
              });
            },
            child: Text("修改值"),
          )
        ],
      ),
    );
  }
}

class InheritedWidgetChildState extends State<InheritedWidgetChild> {
  @override
  Widget build(BuildContext context) {
    print("build");
    final CustomInheritedWidget widget = context.dependOnInheritedWidgetOfExactType<CustomInheritedWidget>();
    return Text(widget.text);
  }

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

class CustomInheritedWidget extends InheritedWidget {
  CustomInheritedWidget({Key key, this.text, Widget child}) : super(key: key, child: child);

  final String text;

  @override
  bool updateShouldNotify(CustomInheritedWidget oldWidget) {
    return oldWidget.text != text;
  }
}
複製代碼

在註釋1，text默認值爲 init，當點擊按鈕的時候，修改text值爲 modify並刷新頁面，咱們會發現 InheritedWidgetChild調用了 didChangeDependencies()方法，咱們來分析一下，點擊按鈕的時候都發生了什麼。

_inheritedWidgets的傳遞

首先說一下流程，在Element被activate和mount的時候，會調用_updateInheritance方法，把本身的_inheritedWidgets指向_parent的_inheritedWidgets，而InheritedElement覆蓋了該方法，代碼分別以下

//Element
  void _updateInheritance() {
    assert(_active);
    _inheritedWidgets = _parent?._inheritedWidgets;
  }
複製代碼

//InheritedElement
 @override
 void _updateInheritance() {
   assert(_active);
   final Map<Type, InheritedElement> incomingWidgets = _parent?._inheritedWidgets;
   if (incomingWidgets != null)
     _inheritedWidgets = HashMap<Type, InheritedElement>.from(incomingWidgets);
   else
     _inheritedWidgets = HashMap<Type, InheritedElement>();
   _inheritedWidgets[widget.runtimeType] = this;
 }
複製代碼

能夠看到InheritedElement拷貝了_parent的_inheritedWidgets並把本身的 widget的runtimeType做爲key，this做爲value保存在了本身的inheritedWidgets屬性裏，因此最開始的代碼的UI樹是這樣的

TestWidget

-CustomInheritedWidget

--Column

---InheritedWidgetChild

---RaisedButton

CustomInheritedWidget拷貝了TestWidget的_inheritedWidgets到本身的_inheritedWidgets並將本身保存其中，而後Column的_inheritedWidgets直接指向了CustomInheritedWidget的_inheritedWidgets，而後InheritedWidgetChild和RaisedButton的_inheritedWidgets直接指向了Column的_inheritedWidgets

InheritedElement的查找

在InheritedWidgetChild裏調用context.dependOnInheritedWidgetOfExactType<CustomInheritedWidget>()方法能夠查找到CustomInheritedWidget，代碼以下：

//Element
 @override
 T dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object aspect}) {
   assert(_debugCheckStateIsActiveForAncestorLookup());
   final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
   if (ancestor != null) {
     assert(ancestor is InheritedElement);
     return dependOnInheritedElement(ancestor, aspect: aspect) as T;
   }
   _hadUnsatisfiedDependencies = true;
   return null;
 }

 @override
 InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object aspect }) {
   assert(ancestor != null);
   _dependencies ??= HashSet<InheritedElement>();
   _dependencies.add(ancestor);
   ancestor.updateDependencies(this, aspect);
   return ancestor.widget;
 }
複製代碼

//InheritedElement
@protected
void updateDependencies(Element dependent, Object aspect) {
  setDependencies(dependent, null);
}
@protected
void setDependencies(Element dependent, Object value) {
  _dependents[dependent] = value;
}
複製代碼

咱們能夠看到，在dependOnInheritedWidgetOfExactType這個方法裏，查找到泛型Widget對應的InheritedElement，保存到ancestor變量裏，而後在本身（InheritedWidgetChild）的_dependencies集合中添加ancestor，並把本身保存到找到ancestor的_dependents集合裏，這樣在InheritedElement更新內部數據的時候，就能夠通知到全部依賴了本InheritedElement的Widget。同時InheritedWidgetChild的_dependencies集合中添加了ancestor，因此在InheritedWidgetChild銷燬的時候，能夠把本身（InheritedWidgetChild）從ancestor的_dependents集合中移除，避免沒必要要的更新和內存泄漏。

總結

總結一下上面的內容，在Element被activate和mount的時候，會調用_updateInheritance方法，把本身的_inheritedWidgets指向_parent的_inheritedWidgets，而InheritedElement覆蓋了該方法,將本身保存到了_inheritedWidgets中，因此在層層向下傳遞的時候，_inheritedWidgets就包含了傳遞過程當中全部的InheritedElement，而後在經過dependOnInheritedWidgetOfExactType方法獲取InheritedElement的時候，方法調用方把本身保存到了InheritedElement的_dependencies集合中，而且方法調用方在本身的_dependencies集合中也添加了本身所依賴的InheritedElement的引用，在方法調用方銷燬的時候，把本身從本身所依賴的InheritedElement的_dependencies集合中刪除本身除，避免沒必要要的更新和內存泄漏。

思考題

1. Element的activate和mount方法在何時被調用？
2. 在CustomInheritedWidget改變內部的數據的時候，爲何InheritedWidgetChild會調用didChangeDependencies()？