工程关键框架如下:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'model.dart';
class ModelWidget<T extends WidgetModel> extends StatefulWidget {
final T model;
final Widget child;
//是否自动dispose, 默认true,false的时候需要自己管理provider的生命周期
final bool autoDispose;
const ModelWidget({
Key key,
this.model,
this.child,
this.autoDispose = true,
}) :
// assert(builder != null || child != null),
super(key: key);
@override
_ModelWidgetState<T> createState() => _ModelWidgetState<T>();
}
class _ModelWidgetState<T extends WidgetModel> extends State<ModelWidget<T>> {
@override
void initState() {
widget.model.init();
super.initState();
}
@override
Widget build(BuildContext context) {
if (widget.autoDispose ?? true) {
//这种方式ChangeNotifierProvider dispose时,会调用notifier的dispose方法
return ChangeNotifierProvider<T>(
create: (_) => widget.model..buildContext(context),
child: widget.child,
);
} else {
return ChangeNotifierProvider.value(
value: widget.model..buildContext(context),
child: widget.child,
);
}
}
}
先预告所有原因都在最后一行: child: widget.child,
简单Demo如下:
import 'dart:convert';
import 'package:flutter/cupertino.dart';
class GoldInfoProviders extends ChangeNotifier {
static final GoldInfoProviders shared = GoldInfoProviders._();
factory GoldInfoProviders() => shared;
GoldInfoProviders._() {
//TODO: 用户退出登录,重新处理数据,切换语言也要刷
}
///当前金币数量
String goldNumber = "01";
String goldFormatNumber = "01";
String goldConvertUSDStr = "01";
String goldNumberFromServer = "01";///此值用于做动画
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterdemo/GoldInfoProviders.dart';
import 'package:flutterdemo/GoldNewProviders.dart';
import 'package:flutterdemo/MySecondPage.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context){
return GoldInfoProviders();
},
child: Consumer<GoldInfoProviders>(
builder: (context,_,child){
print("被重建了");
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
},
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
Widget a = MySecondPage(title: "测",);
Navigator.of(context).push(
CupertinoPageRoute(
fullscreenDialog: false,
builder: (_) {
///此处是把框架中的写法转换过来
return ChangeNotifierProvider(
create: (context){
return GoldNewProviders();
},
child: Builder(
builder: (context) {
print("此处需要断点");
return MySecondPage(title: "测",);
}
),
);
},
)
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
import 'package:flutter/material.dart';
import 'package:flutterdemo/GoldNewProviders.dart';
import 'package:flutterdemo/SimpleWidget.dart';
import 'package:provider/provider.dart';
import 'GoldInfoProviders.dart';
class MySecondPage extends StatefulWidget {
MySecondPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MySecondPageState createState() {
return _MySecondPageState();
}
}
class _MySecondPageState extends State<MySecondPage> {
int _counter = 0;
void _incrementCounter() {
GoldInfoProviders.shared.goldNumber = "==";
GoldInfoProviders.shared.goldFormatNumber = "==";
GoldInfoProviders.shared.goldConvertUSDStr = "==";
GoldInfoProviders.shared.goldNumberFromServer = "==";
GoldInfoProviders.shared.notifyListeners();
}
@override
void initState() {
// TODO: implement initState
super.initState();
print("initState");
}
@override
Widget build(BuildContext context) {
print("被重建了2");
return ChangeNotifierProvider(
create: (context){
return GoldNewProviders();
},
child: Scaffold(
appBar: AppBar(
// Here we take the value from the MySecondPage object that was created by
// the App.build method, and use it to set our appbar title.
title: Builder(builder: (context){
print("你不被重建吗");
return Text(widget.title);
}, ),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'${GoldInfoProviders.shared.goldNumber}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
),
);
}
}
关注点是当 GoldInfoProviders.shared.notifyListeners();通知更新时,MySecondPage中的"被重建了2"是否会被打印 重建 此时可以打印正常重建 也符合常规业务更新逻辑 GoldNewProviders更新 则对应的MySecondPage使用GoldNewProviders的地方也更新。但是没有使用GoldNewProviders的地方也会更新 会造成性能浪费
当被修改为如下时
void _incrementCounter() {
Widget a = MySecondPage(title: "测",);
Navigator.of(context).push(
CupertinoPageRoute(
fullscreenDialog: false,
builder: (_) {
return ChangeNotifierProvider(
create: (context){
return GoldNewProviders();
},
child: Builder(
builder: (context) {
print("此处需要断点");
return a;
}
),
);
},
)
);
}
重点return a;和return MySecondPage(title: "测",)
MySecondPage中的“被重建了2”不在会被打印,
排查好久才排查到这一行。。。。
原理解析:
Element updateChild(Element child, Widget newWidget, dynamic newSlot)中的逻辑
if (hasSameSuperclass && child.widget == newWidget) {
if (child.slot != newSlot)
updateSlotForChild(child, newSlot);
newChild = child;
} else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
if (child.slot != newSlot)
updateSlotForChild(child, newSlot);
child.update(newWidget);
assert(child.widget == newWidget);
assert(() {
child.owner._debugElementWasRebuilt(child);
return true;
}());
newChild = child;
}
完全相同不在调用update 不同则调用update update中会调用rebuild导致重建
return a 返回的是上次创建的完全一样的widget ,所以不在会被重建
总结下来 两种写法:各有利弊