搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Android部落格 > flutter InheritedWidget机制

flutter InheritedWidget机制

Android部落格 2020-05-20

个人网站:chengang.plus

1、用法

用法示例:

class InheritedData extends InheritedWidget { final String data;
InheritedData({ this.data, Widget child, }) : super(child: child);
static InheritedData of(BuildContext context) { return context.dependOnInheritedWidgetOfExactType<InheritedData>(); }
@override bool updateShouldNotify(InheritedData old) => true;}
class TestInheritedDataWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( "${InheritedData.of(context).data}", style: TextStyle(fontSize: 18, color: Colors.pink), ), ); }}
class ParentWidget extends StatefulWidget { @override _ParentWidgetState createState() => _ParentWidgetState();}
class _ParentWidgetState extends State<ParentWidget> { var data = "you are beautiful";
@override Widget build(BuildContext context) { return Scaffold( body: GestureDetector( child: Container( color: Colors.cyan, width: double.infinity, child: InheritedData( data: data, child: TestInheritedDataWidget(), ), ), onTap: _buttonClicked, ), ); }
_buttonClicked() { setState(() { data = "in white"; }); }}

2、ProxyWidget

InheritedWidget继承自ProxyWidget,在ProxyWidget中createElement调用的时候,创建了一个InheritedElement对象。

2.1 InheritedElement

InheritedElement继承自ProxyElement,ProxyElement继承自ComponentElement,ComponentElement继承自Element。

在InheritedElement中定义了一个全局Map对象:

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

同时还定义了一个_updateInheritance方法。在Element和 InheritedElement中都有定义:

Element

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

Map<Type, InheritedElement> _inheritedWidgets定义在Element中,是一个全局变量。

InheritedElement

@overridevoid _updateInheritance() { 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;}

InheritedElement中这个方法的主要逻辑是:先判断当前Element的_inheritedWidgets是否存在,不存在,新建一个,否则将已有的添加到_inheritedWidgets中,同时将当前Element添加到_inheritedWidgets中。

Element中的_updateInheritance方法被执行意味着,所有的Widget对应的Element都持有一个_inheritedWidgets,而InheritedWidget的child就可以通过Element的_updateInheritance方法直接持有InheritedElement。

2.2 保存InheritedElement节点

那么_updateInheritance是哪里调用的呢?

参考之前的文章《flutter 绘制过程 系列2-布局》,在Element类的mount方法中,会调用_updateInheritance方法,最终就调用到这里了。

3、ProxyElement中更新

当InheritedWidget中的data被setState更新之后,依赖data的Widget也会被更新。

3.1 ProxyElement update方法

@overridevoid update(ProxyWidget newWidget) { final ProxyWidget oldWidget = widget; super.update(newWidget); updated(oldWidget); _dirty = true; rebuild();}

到updated方法,在InheritedElement方法中:

InheritedElement

@overridevoid updated(InheritedWidget oldWidget) { if (widget.updateShouldNotify(oldWidget)) super.updated(oldWidget);}

如果我们InheritedWidget中的updateShouldNotify返回为true的话,会执行到InheritedElement的updated方法中:

@protectedvoid updated(covariant ProxyWidget oldWidget) { notifyClients(oldWidget);}

notifyClients执行到了子类InheritedElement的notifyClients方法。

3.2 InheritedElement notifyClients方法

@overridevoid notifyClients(InheritedWidget oldWidget) { for (final Element dependent in _dependents.keys) { notifyDependent(oldWidget, dependent); }}

这里的_dependents里面保存的是依赖InheritedWidget数据的节点。

3.3 _dependents保存依赖数据的Element

本章最开始的时候InheritedData提供了一个静态的of方法,依赖者(InheritedWidget的child Widget)调用dependOnInheritedWidgetOfExactType方法。在Element类中实现,BuildContext类中定义:

Element实现了BuildContext接口

Element

@overrideT dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object aspect}) { final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T]; if (ancestor != null) { return dependOnInheritedElement(ancestor, aspect: aspect) as T; } _hadUnsatisfiedDependencies = true; return null;}

这里先找到InheritedElement,通过_inheritedWidgets的key(runtimeType)找到对应的value(InheritedElement)。接下来调用dependOnInheritedElement方法:

Element

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

在Element类中,先判断_dependencies是否为空,为空的话新建一个HashSet,把这个InheritedElement添加进去,然后执行updateDependencies方法。这个this指代的就是InheritedWidget的child Widget的Element。

这个updateDependencies定义在对应的InheritedElement类中:

InheritedElement

@overridevoid updateDependencies(Element dependent, Object aspect) { final Set<T> dependencies = getDependencies(dependent) as Set<T>; if (dependencies != null && dependencies.isEmpty) return;  if (aspect == null) { setDependencies(dependent, HashSet<T>()); } else { setDependencies(dependent, (dependencies ?? HashSet<T>())..add(aspect as T)); }}
@protectedvoid setDependencies(Element dependent, Object value) { _dependents[dependent] = value;}

到这里基本上清楚了基本的脉络,_dependents里面保存的就是是InheritedWidget的child Widget的Element。

3.4 提醒依赖Element更新

回到InheritedElement notifyClients方法,这里会遍历_dependents,然后执行notifyDependent方法:

InheritedElement

@protectedvoid notifyDependent(covariant InheritedWidget oldWidget, Element dependent) { dependent.didChangeDependencies();}
@mustCallSupervoid didChangeDependencies() { markNeedsBuild();}

到这里重新绘制渲染依赖InheritedWidget数据的Widget。


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《flutter InheritedWidget机制》的版权归原作者「Android部落格」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Android部落格微信公众号

Android部落格微信公众号:chuck2Dev

Android部落格

手机扫描上方二维码即可关注Android部落格微信公众号

Android部落格最新文章

精品公众号随机推荐