链接扩展
- 初学
InheritedWidget的同学可以先看这篇文章 Flutter使用InheritedWidget- 进阶篇，
InheritedWidget+Notifier实现状态管理模式 自定义InheritedProvider- 进阶篇，状态管理刷新构思RxBinder
基于setState进行状态管理刷新
之前写过两篇状态管理的文章(如上链接扩展2，3)。总体思想：使用 StatefulWidget作为父节点，监听Notifier数据源变动，触发更新后，使用setState()重走build。中间部件使用Inherited实现数据共享及局部刷新能力。
image.png
绕开Stateful，直接通过 element 刷新
在进入正题之前，我们首先要明确两个提高页面性能的优化点：
- 能使用
StatelessWidget的地方就不使用StatefulWidget -
flutter整体为树状结构进行绘制，能采用局部刷新的地方，不采用全量刷新
闲话不多说，我们直接上代码：
///自定义的状态管理工具
class RxInheritedProvider<T extends ChangeNotifier> extends StatelessWidget {
final T create;
final Widget Function(BuildContext context) builder;
const RxInheritedProvider({
Key? key,
required this.create,
required this.builder,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return RxInheritedWidget(
child: Builder(builder: (context) => builder(context)),
value: create,
);
}
}
class RxInheritedWidget<T extends ChangeNotifier> extends InheritedNotifier<T> {
RxInheritedWidget({
required T value,
required Widget child,
}) : super(notifier: value, child: child);
get value => this.notifier;
}
核心：使用了官方SDK提供的封装类InheritedNotifier<T>，下面截取部分InheritedNotifier关键代码探讨思想
///代码来自SDK
abstract class InheritedNotifier<T extends Listenable> extends InheritedWidget {
const InheritedNotifier({
Key key,
this.notifier,
@required Widget child,
}) : assert(child != null),
super(key: key, child: child);
final T notifier;
@override
bool updateShouldNotify(InheritedNotifier<T> oldWidget) {
return oldWidget.notifier != notifier;
}
@override
_InheritedNotifierElement<T> createElement() => _InheritedNotifierElement<T>(this);
}
Widget层平白无奇，属于简单的封装，重点我们来看看 _InheritedNotifierElement<T>
//代码来自SDK
class _InheritedNotifierElement<T extends Listenable> extends InheritedElement {
_InheritedNotifierElement(InheritedNotifier<T> widget) : super(widget) {
widget.notifier?.addListener(_handleUpdate);
}
@override
InheritedNotifier<T> get widget => super.widget as InheritedNotifier<T>;
bool _dirty = false;
@override
void update(InheritedNotifier<T> newWidget) {
final T oldNotifier = widget.notifier;
final T newNotifier = newWidget.notifier;
if (oldNotifier != newNotifier) {
oldNotifier?.removeListener(_handleUpdate);
newNotifier?.addListener(_handleUpdate);
}
super.update(newWidget);
}
@override
Widget build() {
if (_dirty)
notifyClients(widget);
return super.build();
}
void _handleUpdate() {
_dirty = true;
markNeedsBuild();
}
@override
void notifyClients(InheritedNotifier<T> oldWidget) {
super.notifyClients(oldWidget);
_dirty = false;
}
@override
void unmount() {
widget.notifier?.removeListener(_handleUpdate);
super.unmount();
}
}
_InheritedNotifierElement 都做了些什么？
-
_InheritedNotifierElement对数据源Notifier进行了监听，当触发变动时，调用markNeedsBuild重走build方法 - 我们知道
InheritedElement的build方法并不会重新刷新自己以及子节点。_InheritedNotifierElement重写了build方法，在方法里进行条件判断，调用了notifyClients对依赖项进行刷新操作
这样，白嫖系统提供的InheritedNotifier<T>，监听数据源进行局部刷新的能力实现了。我们还需要一个工具类用来注册绑定关系。
///提供注册依赖方法
abstract class RxTool {
static T of<T extends ChangeNotifier>(BuildContext context) {
return (_getInheritedElement<T>(context).widget as RxInheritedWidget<T>).value;
}
static void register<T extends ChangeNotifier>(BuildContext context) {
var element = _getInheritedElement<T>(context);
// context.dependOnInheritedElement(element);
context.dependOnInheritedWidgetOfExactType<RxInheritedWidget<T>>(aspect: element.widget);
//这种方式不产生关联关系
// context.getElementForInheritedWidgetOfExactType<RxInheritedWidget<T>>();
}
static InheritedElement _getInheritedElement<T extends ChangeNotifier>(
BuildContext context) {
var element = context.getElementForInheritedWidgetOfExactType<RxInheritedWidget<T>>();
if (element == null) {
throw (Exception("RxInheritedWidget<${T.runtimeType}> is find null"));
}
return element;
}
}
提供 register 方法，将 context 与 InheritedElement 发生绑定依赖关系。在执行 notifyClient() 方法时进行依赖刷新。绑定依赖的方法有两种，根据需要选其一即可：
context.dependOnInheritedElement(element)-
context.dependOnInheritedWidgetOfExactType<RxInheritedWidget<T>>(aspect: element.widget),注意泛型一定要与provider完全匹配，否则无法关联成功
新建 ConsumerBuilder 封装注册依赖，以及获取共享数据
class ConsumerBuilder<T extends ChangeNotifier> extends StatelessWidget {
final Widget Function(BuildContext context, T value) builder;
const ConsumerBuilder({Key? key, required this.builder}) : super(key: key);
@override
Widget build(BuildContext context) {
RxTool.register<T>(context);
return builder(
context,
RxTool.of<T>(context),
);
}
}
运行 Demo
/// demo 示例
class Counter extends ChangeNotifier {
int count = 0;
void increase() {
++count;
notifyListeners();
}
}
class TestWidget extends StatelessWidget {
TestWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: RxInheritedProvider(
create: Counter(),
builder: (context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_child(),
Builder(builder: (context) {
return TextButton(
child: Text("自增"),
onPressed: () {
RxTool.of<Counter>(context).increase();
});
}),
],
),
);
}),
);
}
Widget _child() {
return ConsumerBuilder<Counter>(builder: (context, counter) {
return Text(
'点击了 ${counter.count} 次',
style: TextStyle(fontSize: 30.0),
);
});
}
}
亲测有效，运行界面就不截图了，欢迎评论区交流讨论。
