链接扩展
- 初学
InheritedWidget
的同学可以先看这篇文章 Flutter使用InheritedWidget- 进阶篇,
InheritedWidget
+Notifier
实现状态管理模式 自定义InheritedProvider- 进阶篇,状态管理刷新构思RxBinder
基于setState
进行状态管理刷新
之前写过两篇状态管理的文章(如上链接扩展2,3
)。总体思想:使用 StatefulWidget
作为父节点,监听Notifier
数据源变动,触发更新后,使用setState()
重走build
。中间部件使用Inherited
实现数据共享及局部刷新能力。
绕开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),
);
});
}
}
亲测有效,运行界面就不截图了,欢迎评论区交流讨论。
网友评论