InheritedWidget 原理

一. 使用

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

class _ParentState extends State<Parent> {
  bool inContainer = false;

  final GlobalKey _gk = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('one child'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              setState(() {
                inContainer = !inContainer;
              });
            },
            child: const Text('change'),
          ),
          // `MiddleWidget`表示一層或多層`Widget`
          ShareDataWidget(
            inContainer ? 1 : 2,
            child: const MiddleWidget(
              child: Child(),
            ),
          )
        ],
      ),
    );
  }
}

class ShareDataWidget extends InheritedWidget {
  final int data;

  const ShareDataWidget(
    this.data, {
    Key? key,
    required Widget child,
  }) : super(key: key, child: child);

  static ShareDataWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
  }

  @override
  bool updateShouldNotify(covariant ShareDataWidget oldWidget) {
    return oldWidget.data != data;
  }
}

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

  @override
  State<Child> createState() {
    return _ChildState();
  }
}

class _ChildState extends State<Child> {
  @override
  Widget build(BuildContext context) {
    return Text('data: {ShareDataWidget.of(context)?.data ?? -1}');
  }

}

二. 原理

1. Element 的成員變量 _inheritedWidgets

Element有一個成員變量_inheritedWidgets, 其內(nèi)部保存的是Element樹中的所有InheritedElement.

// Element
Map<Type, InheritedElement>? _inheritedWidgets;

當(dāng)Element插入樹中的時(shí)候(mount()和activate()), 會調(diào)用_updateInheritance(), 當(dāng)前Element會引用父節(jié)點(diǎn)的_inheritedWidgets.

// Element
void _updateInheritance() {
  assert(_lifecycleState == _ElementLifecycle.active);
  _inheritedWidgets = _parent?._inheritedWidgets;
}

如果當(dāng)前Element是InheritedElement, 會將自己添加到_inheritedWidgets.

@override
void _updateInheritance() {
  assert(_lifecycleState == _ElementLifecycle.active);
  final Map<Type, InheritedElement>? incomingWidgets = _parent?._inheritedWidgets;
  if (incomingWidgets != null)
    _inheritedWidgets = HashMap<Type, InheritedElement>.of(incomingWidgets);
  else
    _inheritedWidgets = HashMap<Type, InheritedElement>();
  _inheritedWidgets![widget.runtimeType] = this;
}
2. _inheritedWidgets的使用時(shí)機(jī)

在上面的例子里, Child是通過ShareDataWidget.of(context)獲取ShareDataWidget的.

static ShareDataWidget? of(BuildContext context) {
  return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>
();
}

可以看到例子中是通過dependOnInheritedWidgetOfExactType()得到的ShareDataWidget. 除了dependOnInheritedWidgetOfExactType()可以獲得對應(yīng)的InheritedWidget, 也可以使用getElementForInheritedWidgetOfExactType()獲取對應(yīng)的InheritedElement.

@override
InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object? aspect }) {
  assert(ancestor != null);
  _dependencies ??= HashSet<InheritedElement>();
  _dependencies!.add(ancestor);
  ancestor.updateDependencies(this, aspect);
  return ancestor.widget as InheritedWidget;
}
@override
T? dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object? aspect}) {
  assert(_debugCheckStateIsActiveForAncestorLookup());
  final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T];
  if (ancestor != null) {
    return dependOnInheritedElement(ancestor, aspect: aspect) as T;
  }
  _hadUnsatisfiedDependencies = true;
  return null;
}
@override
InheritedElement? getElementForInheritedWidgetOfExactType<T extends InheritedWidget>() {
  assert(_debugCheckStateIsActiveForAncestorLookup());
  final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T];
  return ancestor;
}
3.Element._dependencies和InheritedElement._dependents

dependOnInheritedWidgetOfExactType()和getElementForInheritedWidgetOfExactType()都是讀取_inheritedWidgets獲取到對應(yīng)的Element. 兩者的區(qū)別除了前者拿到了Element之后返回的是Element.widget, 前者首先調(diào)用了_dependencies ??= HashSet<InheritedElement>(), 這是將InheritedElement保存到了當(dāng)前Element的_dependencies中.

后續(xù)調(diào)用了updateDependencies(), 這個函數(shù)最終將當(dāng)前Element保存到了InheritedElement的_dependents內(nèi).

Element._dependencies和InheritedElement._dependents互相保存彼此.

// InheritedElement
final Map<Element, Object?> _dependents = HashMap<Element, Object?>();

@protected
void updateDependencies(Element dependent, Object? aspect) {
  setDependencies(dependent, null);
}

@protected
void setDependencies(Element dependent, Object? value) {
  _dependents[dependent] = value;
}
4. Element._dependencies和InheritedElement._dependents的使用

當(dāng)InheritedWidget改變時(shí), 對應(yīng)的InheritedElement會調(diào)用update(), 在后續(xù)調(diào)用過程中, 調(diào)取updateShouldNotify()判斷是否繼續(xù)調(diào)用, 并最終調(diào)用到notifyClients().

// ProxyElement, InheritedElement繼承自ProxyElement
@override
void update(ProxyWidget newWidget) {
  final ProxyWidget oldWidget = widget as ProxyWidget;
  assert(widget != null);
  assert(widget != newWidget);
  super.update(newWidget);
  assert(widget == newWidget);
  updated(oldWidget);
  _dirty = true;
  rebuild();
}

// InheritedElement
@override
void updated(InheritedWidget oldWidget) {
  if ((widget as InheritedWidget).updateShouldNotify(oldWidget))
    super.updated(oldWidget);
}

@override
void notifyClients(InheritedWidget oldWidget) {
  assert(_debugCheckOwnerBuildTargetExists('notifyClients'));
  for (final Element dependent in _dependents.keys) {
    assert(() {
      // check that it really is our descendant
      Element? ancestor = dependent._parent;
      while (ancestor != this && ancestor != null)
        ancestor = ancestor._parent;
      return ancestor == this;
    }());
    // check that it really depends on us
    assert(dependent._dependencies!.contains(this));
    notifyDependent(oldWidget, dependent);
  }
}

在notifyClients()中, 通過InheritedElement._dependents和Element._dependencies進(jìn)行驗(yàn)證, 將滿足互相存有條件的Element傳入notifyDependent()

// InheritedElement
@protected
void notifyDependent(covariant InheritedWidget oldWidget, Element dependent) {
  dependent.didChangeDependencies();
}

// Element
@mustCallSuper
void didChangeDependencies() {
  assert(_lifecycleState == _ElementLifecycle.active); // otherwise markNeedsBuild is a no-op
  assert(_debugCheckOwnerBuildTargetExists('didChangeDependencies'));
  markNeedsBuild();
}

// StatefulElement
@override
void didChangeDependencies() {
  super.didChangeDependencies();
  _didChangeDependencies = true;
}

@override
void performRebuild() {
  if (_didChangeDependencies) {
    state.didChangeDependencies();
    _didChangeDependencies = false;
  }
  super.performRebuild();
}

最終調(diào)用到dependent.didChangeDependencies.

如果dependent是StatefulElement, 則會修改_didChangeDependencies = true, 當(dāng)前StatefulElement調(diào)用performRebuild()的時(shí)候, 如果_didChangeDependencies == true, 就會調(diào)用state.didChangeDependencies().

如果dependent不是StatefulElement, 就會將dependent標(biāo)記為dirty, 在下一幀的時(shí)候rebuild.

總結(jié):

  1. InheritWidget是通過Element._inheritedWidgets層層傳遞保存, 相當(dāng)于是一個全局變量, 在需要的時(shí)候讀取即可.
  2. 某個Element通過dependOnInheritedWidgetOfExactType()的方式獲取InheritWidget會將這個Element保存在獲取到的InheritedElement的_dependents中, 那么當(dāng)InheritWidget改變后觸發(fā)InheritedElement.update(), 進(jìn)而在后續(xù)過程中讀取_dependents拿到依賴這個InheritedElement的Element.
  3. 如果StatefulElement依賴了一個InheritedElement, 當(dāng)InheritedElement的InhteritedWidget發(fā)生改變且updateShouldNotify() == true時(shí),將StatefulElement標(biāo)記為dirty, 將_didChangeDependencies改為true, 在下一幀rebuild被標(biāo)記為dirty的Element時(shí), 通過performRebuild()最終觸發(fā)State.didChangeDependencies().
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容