工程關(guān)鍵框架如下:
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;
//是否自動(dòng)dispose, 默認(rèn)true,false的時(shí)候需要自己管理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時(shí),會(huì)調(diào)用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,
);
}
}
}
先預(yù)告所有原因都在最后一行: 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: 用戶退出登錄,重新處理數(shù)據(jù),切換語言也要刷
}
///當(dāng)前金幣數(shù)量
String goldNumber = "01";
String goldFormatNumber = "01";
String goldConvertUSDStr = "01";
String goldNumberFromServer = "01";///此值用于做動(dòng)畫
}
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: (_) {
///此處是把框架中的寫法轉(zhuǎn)換過來
return ChangeNotifierProvider(
create: (context){
return GoldNewProviders();
},
child: Builder(
builder: (context) {
print("此處需要斷點(diǎn)");
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.
),
);
}
}
關(guān)注點(diǎn)是當(dāng) GoldInfoProviders.shared.notifyListeners();通知更新時(shí),MySecondPage中的"被重建了2"是否會(huì)被打印 重建 此時(shí)可以打印正常重建 也符合常規(guī)業(yè)務(wù)更新邏輯 GoldNewProviders更新 則對(duì)應(yīng)的MySecondPage使用GoldNewProviders的地方也更新。但是沒有使用GoldNewProviders的地方也會(huì)更新 會(huì)造成性能浪費(fèi)
當(dāng)被修改為如下時(shí)
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("此處需要斷點(diǎn)");
return a;
}
),
);
},
)
);
}
重點(diǎn)return a;和return MySecondPage(title: "測",)
MySecondPage中的“被重建了2”不在會(huì)被打印,
排查好久才排查到這一行。。。。
原理解析:
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;
}
完全相同不在調(diào)用update 不同則調(diào)用update update中會(huì)調(diào)用rebuild導(dǎo)致重建
return a 返回的是上次創(chuàng)建的完全一樣的widget ,所以不在會(huì)被重建
總結(jié)下來 兩種寫法:各有利弊