在做需求時經(jīng)常會遇到組件間通信，本篇匯總了幾種常用的通信方式。
父子組件之間的通信
最簡單的方式就是通過構(gòu)造器傳遞數(shù)據(jù)，但當(dāng)嵌套層級比較深的時，傳參就比較難看了，或許這時還考慮用單例，但對于簡單數(shù)據(jù)來說未免大材小用了。
例如，還是這個二級頁場景，由多個子孫組件組成（同色框表示同級），在頂層頁面可以知道從上個頁面攜帶的數(shù)據(jù)，但最下層的輸入框組件（箭頭位置）也需要知道部分?jǐn)?shù)據(jù)才能發(fā)送評論，這里說下如何用Provider快速實現(xiàn)。
Provider
- 介紹：基于InheritedWidget，一種自上向下的共享數(shù)據(jù)機制，方便子孫節(jié)點得到祖先節(jié)點共享的數(shù)據(jù)。
- 舉例：
// 1、添加依賴
dependencies:
provider: ^5.0.0
// 2、通過Provider包裹的child都共享數(shù)據(jù) feedShareData
...
return Scaffold(
...
body: Provider(
create: (_) => feedShareData,
child: Builder(builder: (context) {
return FeedDetailPage();
}),
),
);
// 3、在子孫組件都可以讀取并修改共享數(shù)據(jù)
feedShareData = context.read<NormalFeedsDetailShareData>();
...
- 適用場景：當(dāng)子組件需要共享祖先/父組件的數(shù)據(jù)時，尤其在跨層傳遞場景。
除了數(shù)據(jù)共享外，還有就是數(shù)據(jù)傳遞，也就是組件想知道另個組件的某些變化，并做出反應(yīng)（callback）。在Dart中函數(shù)是可以當(dāng)做對象傳遞的，但同樣存在層級復(fù)雜時可能要傳遞大量的函數(shù)，接下來介紹常用的數(shù)據(jù)傳遞組件。
ChangeNotifier
- 介紹：可用于擴展
Model，并在Model發(fā)生變化時調(diào)用notifyListeners使得監(jiān)聽該Model的組件重新構(gòu)建。 - 舉例：詳見官方提供的案例，實現(xiàn)了加入購物車的效果。
- 適用場景： 常和
Provider（Consumer）配套解決數(shù)據(jù)共享&狀態(tài)傳遞問題。
NotificationListener
- 介紹：通知機制，即每個節(jié)點都可以向上發(fā)送Notification（自下向上的），除非中途被攔截否則會一直向上傳。
- 舉例：在上篇Flutter小白|初探事件處理介紹了如何通過NotificationListener解決多個滑動組件下、監(jiān)聽最外層組件滑動到邊界事件，可見使用NotificationListener可以很方便獲取到可滑動子組件的滑動行為。當(dāng)然還可以在子組件上通過
Notification#dispatch發(fā)送自定義通知，然后在上層接收并處理。
// 1、自定義通知類
class CustomNotification extends Notification {
String msg;
CustomNotification(this.msg);
}
// 2、子組件發(fā)送通知
...
CustomNotification("Test").dispatch(context);
...
// 3、父組件接收和處理通知
...
NotificationListener<CustomNotification>(
onNotification: (notification) {
// 處理邏輯
// 同樣的返回值表示是否攔截
return true;
},
child:...
)
- 適用場景：當(dāng)祖先/父組件要隨著子組件的某些情況變化而變化時，常用于滑動情況。
兄弟組件之間的通信
ValueListenableBuilder
- 介紹：顧名思義，對某個 value進行監(jiān)聽，只要value發(fā)生變化就會直接通過
setState重新構(gòu)建子組件樹。同樣的，因為會rebuild，使用時盡可能縮小包裹的組件范圍，以減少不必要的組件被重建、提高性能。 -
舉例：例如想要實現(xiàn)這樣的需求，底部輸入框有內(nèi)容時按鈕亮起，無內(nèi)容按鈕置灰，代碼如下：
// 1、創(chuàng)建：定義一個文本內(nèi)容的ValueNotifier，
ValueNotifier<String> emojiInfoNotifier = ValueNotifier("");
// 2、使用：輸入框組件和按鈕組件都監(jiān)聽這個string信息
...
ValueListenableBuilder(
valueListenable: emojiInfoNotifier,
builder: (BuildContext context, String value, Widget? child) {
// 輸入框組件，根據(jù)輸入內(nèi)容展示，沒有內(nèi)容展示默認(rèn)文案
return Text(
value.isEmpty
? Strings.share_thoughts
: value,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: Res.t12, color: Res.c1),
);
},
),
...
ValueListenableBuilder(
valueListenable: emojiInfoNotifier,
builder: (BuildContext context, String value, Widget? child) {
// 按鈕組件，根據(jù)有無內(nèi)容改變icon顏色
return SvgPicture.asset(
iconUrl,
color: value.isEmpty ? Res.c4 : Res.c2,
width: 16,
height: 16,
);
},
),
...
// 3、隨數(shù)據(jù)變化而變化：當(dāng)點擊表情按鈕導(dǎo)致文本內(nèi)容發(fā)生變化時，輸入框組件和按鈕組件都會發(fā)生變化，
...
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
// 超過最大表情展示個數(shù)會彈toast提示
if (emojiInfoNotifier.value.characters.length >= maxInputEmojiCount) {
Toasts.show(Strings.input_more);
} else {
emojiInfoNotifier.value += emoji?.text ?? "";
}
},
child:... // 表情按鈕
)...
// 4、銷毀：在依賴組件dispose的同時銷毀
@override
void dispose() {
super.dispose();
emojiInfoNotifier.dispose();
...
}
- 適用場景：當(dāng)組件A要隨著其他組件B上操作的數(shù)據(jù)變化而變化時，可以在同個組件樹，也可以不是。常用于組件關(guān)系不復(fù)雜且監(jiān)聽數(shù)據(jù)簡單的情況。
EventBus
- 介紹：對于要跨組件甚至跨頁面組件通信的，這時用
EventBus屢試不爽。關(guān)于EventBus開發(fā)一定非常熟悉了，核心就是觀察者模式，一方發(fā)布消息，一方訂閱感興趣的消息并做處理。 - 舉例：
// 1、添加依賴
dependencies:
event_bus: ^2.0.0
// 2、新增事件類
class CustomEvent {
String msg;
CustomEvent(this.msg);
}
// 3、發(fā)送事件（用單例維護，這里不展示了）
`EventBusExt.getDefault().fire(CustomEvent("test"));`
// 4、訂閱事件并處理
EventBusExt.getDefault().on<CustomEvent>().listen((event) {
// 處理邏輯
});
- 適用場景：可以在任何位置傳遞事件，可以解決大多數(shù)通信需求。
總結(jié)
本篇從數(shù)據(jù)通信方式（共享數(shù)據(jù)、傳遞數(shù)據(jù)）和組件關(guān)系（父子關(guān)系、兄弟關(guān)系）兩方面分別介紹了Flutter中常用的組件，整體看Provider和EventBus總是能很好的處理各類場景，功能強大，但也有維護成本的問題（比如要新增很多事件類等），一些簡單場景可以考慮其他小組件。
