背景
Flutter 常用的狀態(tài)管理框架 Bloc、 Provider，Bloc 架構(gòu)中使用了 Provide啸箫，而 Provider 是基于 InheritedWidget 組件的冀惭。所以本節(jié)我們通過自實(shí)現(xiàn) InheritedWidget 來了解 Provider 的原理。
setState
當(dāng)不依賴狀態(tài)管理框架時(shí)均芽，更新組件狀態(tài)的方法就是 setState(fn)，調(diào)用該方法后单鹿，會(huì)重新調(diào)用 StatefulWidget 的 build 方法重新構(gòu)建組件掀宋，達(dá)到刷新界面的效果。
InheritedWidget
- 簡(jiǎn)介
InheritedWidget 是 Flutter 中非常重要的一個(gè)功能型組件仲锄，它提供了一種在 widget 樹中從上到下共享數(shù)據(jù)的方式劲妙，比如我們?cè)趹?yīng)用的根 widget 中通過InheritedWidget共享了一個(gè)數(shù)據(jù)，那么我們便可以在任意子widget 中來獲取該共享的數(shù)據(jù)儒喊！
class CountInheritedWidget extends InheritedWidget {
CountInheritedWidget({
Key? key,
required this.data,
required Widget child,
}) : super(key: key, child: child);
final CountModel data; // 需要在子樹中共享的數(shù)據(jù)镣奋，保存點(diǎn)擊次數(shù)
//定義一個(gè)便捷方法，方便子樹中的widget獲取共享數(shù)據(jù)
static CountInheritedWidget? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<CountInheritedWidget>();
}
//該回調(diào)決定當(dāng)data發(fā)生變化時(shí)怀愧，是否通知子樹中依賴data的Widget重新build
@override
bool updateShouldNotify(CountInheritedWidget old) {
return old.data != data;
}
}
class ChildText extends StatefulWidget {
@override
State<ChildText> createState() => _ChildTextState();
}
class _ChildTextState extends State<ChildText> {
@override
Widget build(BuildContext context) {
return Text(
CountInheritedWidget.of(context)?.data.count.toString() ?? '',
);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
//父或祖先widget中的InheritedWidget改變(updateShouldNotify返回true)時(shí)會(huì)被調(diào)用侨颈。
//如果build中沒有依賴InheritedWidget，則此回調(diào)不會(huì)被調(diào)用芯义。
print("ChildText Dependencies change");
}
}
- didChangeDependencies
State對(duì)象有一個(gè) didChangeDependencies 回調(diào)哈垢，它會(huì)在“依賴”發(fā)生變化時(shí)被 Flutter 框架調(diào)用。而這個(gè)“依賴”指的就是子 widget 是否使用了父 widget 中 InheritedWidget 的數(shù)據(jù)扛拨！如果使用了耘分，則代表子 widget 有依賴；如果沒有使用則代表沒有依賴绑警。這種機(jī)制可以使子組件在所依賴的InheritedWidget 變化時(shí)來更新自身求泰！
建立依賴：dependOnInheritedWidgetOfExactType()->dependOnInheritedElement()->
InheritedElement.updateDependencies()->_dependents[dependent] = value;(往依賴表里添加依賴的子組件)
通知依賴更新：
InheritedElement.update->ProxyElement.notifyClients->InheritedElement.notifyClients(遍歷_dependents更新依賴)-InheritedElement.notifyDependent>dependent.didChangeDependencies();
- 通知數(shù)據(jù)發(fā)生變化
為了更貼近 Flutter 開發(fā)，我們使用Flutter SDK中提供的ChangeNotifier 類 待秃，它實(shí)現(xiàn)了一個(gè) Flutter 風(fēng)格的發(fā)布者-訂閱者模式拜秧。我們將要共享的狀態(tài)放到一個(gè) Model 類中，然后讓它繼承自 ChangeNotifier章郁，這樣當(dāng)共享的狀態(tài)改變時(shí)枉氮，我們只需要調(diào)用 notifyListeners() 來通知訂閱者，然后由訂閱者來重新構(gòu)建 InheritedWidget暖庄，而依賴該InheritedWidget 的子孫 Widget 就會(huì)更新聊替。
class CountModel extends ChangeNotifier {
int count = 0;
void add() {
count++;
notifyListeners();
}
}
class _ChangeCountProviderState extends State<ChangeCountProvider> {
void update() {
setState(() {});
}
@override
void initState() {
// 給data添加監(jiān)聽器
widget.data.addListener(update);
super.initState();
}
@override
void dispose() {
// 移除data的監(jiān)聽器
widget.data.removeListener(update);
super.dispose();
}
@override
Widget build(BuildContext context) {
return CountInheritedWidget(
data: widget.data,
child: widget.child,
);
}
}
- 優(yōu)化
如果我們只想在子組件中引用 CountInheritedWidget 中共享的數(shù)據(jù)，但卻不希望在 CountInheritedWidget 發(fā)生變化時(shí)調(diào)用子組件的 didChangeDependencies 方法重新構(gòu)建子組件怎么辦培廓？因?yàn)樽咏M件和 CountInheritedWidget 建立了依賴關(guān)系惹悄，當(dāng) CountInheritedWidget 更新時(shí)，依賴它的子組件也會(huì)更新肩钠，所以只要我們解除這種依賴關(guān)系就可以了泣港。通過 getElementForInheritedWidgetOfExactType 方法即可暂殖。dependOnInheritedWidgetOfExactType 和 getElementForInheritedWidgetOfExactType 的區(qū)別就是前者會(huì)注冊(cè)依賴關(guān)系，而后者不會(huì)当纱。
//添加一個(gè)listen參數(shù)呛每，表示是否建立依賴關(guān)系
static CountModel? of(BuildContext context, {bool listen = true}) {
final provider = listen
? context.dependOnInheritedWidgetOfExactType<CountInheritedWidget>()
: context.getElementForInheritedWidgetOfExactType<CountInheritedWidget>()?.widget as CountInheritedWidget;
return provider?.data;
}
至此我們計(jì)數(shù)器版的狀態(tài)管理器就實(shí)現(xiàn)了，它具備 Provider Package 中的核心功能坡氯，但是這個(gè) demo 的功能并不全面晨横，實(shí)現(xiàn)這個(gè)迷你 Provider 的主要目的是為了幫助大家了解 Provider Package 底層的原理，所以在實(shí)戰(zhàn)中還是使用 Provider Package箫柳。
Provider
class _ProviderCountViewState extends State<ProviderCountView> {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (ctx) => _CountChangeNotifier(),
child: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Provider'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Consumer<_CountChangeNotifier>(builder: (ctx, value, child) {
return Text(
"${value.count}",
style: const TextStyle(
fontWeight: FontWeight.w500, fontSize: 20),
);
}),
ChildHint(),
Padding(
padding: const EdgeInsets.only(top: 50),
child: Builder(builder: (ctx) {
return FloatingActionButton(
onPressed: () {
var model = ctx.read<_CountChangeNotifier>();
model.add();
},
child: const Icon(Icons.add),
);
}),
)
],
),
),
),
);
}
}
class _CountChangeNotifier extends ChangeNotifier {
int count = 0;
void add() {
count++;
notifyListeners();
}
}
