InheritedWidget原理淺析

定義和用法

本文只對(duì)InheritedWidget進(jìn)行分析,需要讀者具備一些基礎(chǔ)知識(shí),包括但不限于:

  1. Flutter的基本知識(shí);
  2. Widget、Element的關(guān)系

一個(gè)可以高效的沿著樹高效傳遞信息的基礎(chǔ)Widget。
用戶可使用BuildContext.dependOnInheritedWidgetOfExactType獲取最近特定類型的InheritedWidget實(shí)例,之后每當(dāng)被引用的InheritedWidget自身狀態(tài)發(fā)生變化時(shí),會(huì)導(dǎo)致引用者重新build。

按照官方教程,粗略的提一下用法(此處不再贅述詳細(xì)的用法,可參考數(shù)據(jù)共享(InheritedWidget)):

  • 首先定義一個(gè)InheritedWidget類型的Widget:
//官方Demo
class FrogColor extends InheritedWidget {
   const FrogColor({
     Key key,
     @required this.color,
     @required Widget child,
   }) : assert(color != null),
        assert(child != null),
        super(key: key, child: child);

   final Color color;

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

   @override
   bool updateShouldNotify(FrogColor old) => color != old.color;
}
  • 將該Widget作為普通Widget添加到Widget樹中;
  • 在其任一子Widget中使用FrogColor.of(context).color即可獲得color信息。

要想做到子Widget數(shù)據(jù)刷新,有兩個(gè)關(guān)鍵點(diǎn):

  1. 子Widget如何如何跨Widget拿到InheritedWidget
  2. InheritedWidget如何在數(shù)據(jù)改變時(shí)通知子Widget刷新(build)

這兩點(diǎn)就是InheritedWidget的核心和關(guān)鍵所在,接下來我們對(duì)著兩個(gè)問題進(jìn)行分析:

InheritedWidget在樹中的傳遞

在上面的示例代碼中,子Widget中唯一可見和InheritedWidget發(fā)生關(guān)聯(lián)的代碼就是FrogColor.of(context).color。其中的關(guān)鍵方法是dependOnInheritedWidgetOfExactType,該方法在BuildContext中定義,并在Element中有具體實(shí)現(xiàn)。查看BuildContext.dependOnInheritedWidgetOfExactTypeElement中的源碼如下:

Map<Type, InheritedElement> _inheritedWidgets;

@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;
}

可以看到,每個(gè)Element實(shí)例都持有一個(gè)_inheritedWidgets,每當(dāng)要為Widget添加特定類型的依賴時(shí),就會(huì)從該集合里取出相關(guān)類型的InheritedElement實(shí)例。那么_inheritedWidgets是在何時(shí)保存了InheritedElement的呢?
接下來繼續(xù)看Element源碼,查看_inheritedWidgets在何時(shí)賦值。
在element中有一個(gè)_updateInheritance方法:

void _updateInheritance() {
    assert(_active);
    _inheritedWidgets = _parent?._inheritedWidgets;
}

它在mountactivate函數(shù)執(zhí)行時(shí)被調(diào)用。也就是說每次element掛載和重新啟用時(shí),element都會(huì)從它的上層element中打包拿到其所持有的所有InheritedElement
InheritedElement繼承了Element,并重寫了_updateInheritance方法:

@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;
}

相較于普通的ElementInheritedElement不僅會(huì)拿到其上層element所有的InheritedElement,而且會(huì)將自己也作為一個(gè)元素添加到集合中。
不難看出,每個(gè)Element都會(huì)持有一個(gè)集合,該集合持有其上層Element中出現(xiàn)的所有InheritedElement,每當(dāng)出現(xiàn)一個(gè)InheritedElement,該InheritedElement會(huì)將其自身添加到該集合中,并向下傳遞。InheritedWidget正是通過這種方法確保下層控件可以訪問到其上層中所有的InheritedWidget

InheritedWidget如何進(jìn)行刷新

當(dāng)InheritedWidget的狀態(tài)發(fā)生變化時(shí),它是如何通知相關(guān)子樹進(jìn)行刷新呢,我們繼續(xù)分析dependOnInheritedWidgetOfExactType方法的代碼,當(dāng)從_inheritedWidgets中能取出特定類型的實(shí)例ancestor時(shí)。會(huì)執(zhí)行dependOnInheritedElement方法:

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

InheritedElement實(shí)例會(huì)調(diào)用自己的updateDependencies方法并將當(dāng)前Element實(shí)例傳遞過去:

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;
}

InheritedElement中,通過_dependents集合保存所有與該實(shí)例發(fā)生依賴的Widget。每次有Widget與InheritedElement建立依賴關(guān)系時(shí),都會(huì)講自己添加到InheritedElement的集合中。而當(dāng)InheritedElement更新時(shí),會(huì)執(zhí)行實(shí)例上的 notifyClients

@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));
    //遍歷所有的element
    notifyDependent(oldWidget, dependent);
  }
}
@protected
void notifyDependent(covariant InheritedWidget oldWidget, Element dependent) {
  //依次調(diào)用所有子element的didChangeDependencies方法
  dependent.didChangeDependencies();
}

在element的didChangeDependencies方法中會(huì)調(diào)用markNeedsBuild方法,該方法會(huì)將標(biāo)記當(dāng)前元素,并在下一幀到來時(shí)重新創(chuàng)建Widget,具體實(shí)現(xiàn)原理已經(jīng)脫離InheritedWidget的知識(shí)范疇,這里不再進(jìn)行討論。

總結(jié)

InheritedWidget的關(guān)鍵核心是兩個(gè)集合。通過一個(gè)沿樹自上而下傳遞的集合存儲(chǔ)所有上層組件中的InheritedWidget,以便Widget可以拿到任意上層樹種的InheritedWidget。而在InheritedWidget則通過一個(gè)集合持有所有的依賴元素,每當(dāng)有元素與其發(fā)生依賴關(guān)系,該元素就被被添加入集合中。當(dāng)InheritedWidget的狀態(tài)發(fā)生改變時(shí),將遍歷該集合并執(zhí)行每個(gè)元素的didChangeDependencies方法。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評(píng)論 6 532
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,538評(píng)論 3 417
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評(píng)論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評(píng)論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,761評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,207評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,419評(píng)論 0 288
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,959評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,782評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,983評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,222評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評(píng)論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,678評(píng)論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,978評(píng)論 2 374