## InheritedWidget InheritedWidget是Flutter中非常重要的一個功能型Widget，它可以高效的將數據在Widget樹中向下傳遞、共享，這在一些需要在Widget樹中共享數據的場景中非常方便，如Flutter中，正是通過InheritedWidget來共享應用主題(Theme)和Locale(當前語言環境)信息的。 > InheritedWidget和React中的context功能類似，和逐級傳遞數據相比，它們能實現組件跨級傳遞數據。InheritedWidget的在Widget樹中數據傳遞方向是從上到下的，這和Notification的傳遞方向正好相反。 ### didChangeDependencies 在介紹StatefulWidget時，我們提到State對象有一個回調`didChangeDependencies`，它會在“依賴”發生變化時被Flutter Framework調用。而這個“依賴”指的就是是否使用了父widget中InheritedWidget的數據，如果使用了，則代表有依賴，如果沒有使用則代表沒有依賴。這種機制可以使子組件在所依賴的主題、locale等發生變化時有機會來做一些事情。 我們看一下之前“計數器”示例應用程序的InheritedWidget版本，需要說明的是，本例主要是為了演示InheritedWidget的功能特性，并不是計數器的推薦實現方式。 首先，我們通過繼承InheritedWidget，將當前計數器點擊次數保存在ShareDataWidget的`data`屬性中： ``` class ShareDataWidget extends InheritedWidget { ShareDataWidget({ @required this.data, Widget child }) :super(child: child); int data; //需要在子樹中共享的數據，保存點擊次數 //定義一個便捷方法，方便子樹中的widget獲取共享數據 static ShareDataWidget of(BuildContext context) { return context.inheritFromWidgetOfExactType(ShareDataWidget); } //該回調決定當data發生變化時，是否通知子樹中依賴data的Widget @override bool updateShouldNotify(ShareDataWidget old) { //如果返回false，則子樹中依賴(build函數中有調用)本widget //的子widget的`state.didChangeDependencies`會被調用 return old.data != data; } } ``` 然后我們實現一個子widget \_TestWidget，在其build方法中引用ShareDataWidget中的數據；同時，在其`didChangeDependencies()` 回調中打印日志： ``` class _TestWidget extends StatefulWidget { @override __TestWidgetState createState() => new __TestWidgetState(); } class __TestWidgetState extends State<_TestWidget> { @override Widget build(BuildContext context) { //使用InheritedWidget中的共享數據 return Text(ShareDataWidget .of(context) .data .toString()); } @override void didChangeDependencies() { super.didChangeDependencies(); //父或祖先widget中的InheritedWidget改變(updateShouldNotify返回true)時會被調用。 //如果build中沒有依賴InheritedWidget，則此回調不會被調用。 print("Dependencies change"); } } ``` 最后，我們創建一個按鈕，每點擊一次，就將ShareDataWidget的值自增： ``` class InheritedWidgetTestRoute extends StatefulWidget { @override _InheritedWidgetTestRouteState createState() => new _InheritedWidgetTestRouteState(); } class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> { int count = 0; @override Widget build(BuildContext context) { return Center( child: ShareDataWidget( //使用ShareDataWidget data: count, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.only(bottom: 20.0), child: _TestWidget(),//子widget中依賴ShareDataWidget ), RaisedButton( child: Text("Increment"), //每點擊一次，將count自增，然后重新build,ShareDataWidget的data將被更新 onPressed: () => setState(() => ++count), ) ], ), ), ); } } ``` 運行后界面如下：  每點擊一次按鈕，計數器就會自增，控制臺就會打印一句日志： ``` I/flutter ( 8513): Dependencies change ``` 可見依賴發生變化后，其`didChangeDependencies()`會被調用。但是讀者要注意，如果\_TestWidget的build方法中沒有使用ShareDataWidget的數據，那么它的`didChangeDependencies()`將不會被調用，因為它并沒有依賴ShareDataWidget。 > 思考題：Flutter framework是怎么知道子widget有沒有依賴InheritedWidget的？ #### 應該在didChangeDependencies()中做什么？ 一般來說，子widget很少會重寫此方法，因為在依賴改變后framework也都會調用`build()`方法。但是，如果你需要在依賴改變后執行一些昂貴的操作，比如網絡請求，這時最好的方式就是在此方法中執行，這樣可以避免每次`build()`都執行這些昂貴操作。