flutter|flutter demo （四）（对话框）
我在使用flutter里的对话框控件的时候遇到了一个奇怪的错误：
Another exception was thrown: Navigator operation requested with a context that does not include a Navigator
研究了一下才知道，flutter里的dialog不是随便就能用的。
原代码如下：
import 'package:flutter/material.dart';
main() {
runApp(new MyApp());
}class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Test',
home: new Scaffold(
appBar: new AppBar(title: new Text('Test')),
body: _buildCenterButton(context),
),
);
}
}Widget _buildCenterButton(BuildContext context) {
return new Container(
alignment: Alignment.center,
child: new Container(
child: _buildButton(context),
));
}Widget _buildButton(BuildContext context) {
return new RaisedButton(
padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
//padding
child: new Text(
'show dialog',
style: new TextStyle(
fontSize: 18.0, //textsize
color: Colors.white, // textcolor
),
),
color: Theme.of(context).accentColor,
elevation: 4.0,
//shadow
splashColor: Colors.blueGrey,
onPressed: () {
showAlertDialog(context);
});
}
void showAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("Dialog Title"),
content: new Text("This is my content"),
actions:[
new FlatButton(child:new Text("CANCEL"), onPressed: (){
Navigator.of(context).pop();
},),
new FlatButton(child:new Text("OK"), onPressed: (){
Navigator.of(context).pop();
},)
]));
}
点击按钮的时候没有任何反应，控制台的报错是:
Another exception was thrown: Navigator operation requested with a context that does not include a Navigator。大致意思是，context里没有Navigator对象，却做了Navigator相关的操作。有点莫名其妙。
分析下源码吧~
看showDialog方法的源码：
Future showDialog({
@required BuildContext context,
bool barrierDismissible: true,
@Deprecated(
'Instead of using the "child" argument, return the child from a closure '
'provided to the "builder" argument. This will ensure that the BuildContext '
'is appropriate for widgets built in the dialog.'
) Widget child,
WidgetBuilder builder,
}) {
assert(child == null || builder == null);
return Navigator.of(context, rootNavigator: true/*注意这里*/).push(new _DialogRoute(
child: child ?? new Builder(builder: builder),
theme: Theme.of(context, shadowThemeOnly: true),
barrierDismissible: barrierDismissible,
barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
));
} Navigator.of 的源码:
static NavigatorState of(
BuildContext context, {
bool rootNavigator: false,
bool nullOk: false,
}) {
final NavigatorState navigator = rootNavigator
? context.rootAncestorStateOfType(const TypeMatcher())
: context.ancestorStateOfType(const TypeMatcher());
assert(() {
if (navigator == null && !nullOk) {
throw new FlutterError(
'Navigator operation requested with a context that does not include a Navigator.\n'
'The context used to push or pop routes from the Navigator must be that of a '
'widget that is a descendant of a Navigator widget.'
);
}
return true;
}());
return navigator;
}
找到了一模一样的错误信息字符串！看来就是因为Navigator.of(context)抛出了一个FlutterError。
之所以出现这个错误，是因为满足了if (navigator == null && !nullOk) 的条件， 也就是说:
context.rootAncestorStateOfType(const TypeMatcher
Navigator.of函数有3个参数，第一个是BuildContext，第二个是rootNavigator，默认为false，可不传，第三个是nullOk，默认为false，可不传。rootNavigator的值决定了是调用ancestorStateOfType还是rootAncestorStateOfType，nullOk的值决定了如果最终结果为null值时该抛出异常还是直接返回一个null。
我们做个测试，传入不同的rootNavigator和nullOk的值，看有什么结果：
void showAlertDialog(BuildContext context) {
try{
debugPrint("Navigator.of(context, rootNavigator=true, nullOk=false)="+
(Navigator.of(context, rootNavigator: true, nullOk: false)).toString());
}catch(e){
debugPrint("error1 " +e.toString());
}
try{
debugPrint("Navigator.of(context, rootNavigator=false, nullOk=false)="+
(Navigator.of(context, rootNavigator: false, nullOk: false)).toString());
}catch(e){
debugPrint("error2 " +e.toString());
}
try{
debugPrint("Navigator.of(context, rootNavigator=false, nullOk=true)="+
(Navigator.of(context, rootNavigator: false, nullOk: true)).toString());
}catch(e){
debugPrint("error3 " +e.toString());
}
//先注释掉showDialog部分的代码
//showDialog(
//context: context,
//builder: (_) => new AlertDialog(
//title: new Text("Dialog Title"),
//content: new Text("This is my content"),
//actions:[
//new FlatButton(child:new Text("CANCEL"), onPressed: (){
//Navigator.of(context).pop();
//
//},),
//new FlatButton(child:new Text("OK"), onPressed: (){
//Navigator.of(context).pop();
//
//},)
//]
//
//));
}
打印结果：
error1 Navigator operation requested with a context that does not include a Navigator.
error2 Navigator operation requested with a context that does not include a Navigator.
Navigator.of(context, rootNavigator=false, nullOk=true)=null
显然，无论怎么改rootNavigator和nullOk的值，Navigator.of(context, rootNavigator, nullOk)的值都是null。
为什么呢？
rootAncestorStateOfType函数的实现位于framework.dart里，我们可以看一下ancestorStateOfType和rootAncestorStateOfType的区别:
@override
State ancestorStateOfType(TypeMatcher matcher) {
assert(_debugCheckStateIsActiveForAncestorLookup());
Element ancestor = _parent;
while (ancestor != null) {
if (ancestor is StatefulElement && matcher.check(ancestor.state))
break;
ancestor = ancestor._parent;
}
final StatefulElement statefulAncestor = ancestor;
return statefulAncestor?.state;
}@override
State rootAncestorStateOfType(TypeMatcher matcher) {
assert(_debugCheckStateIsActiveForAncestorLookup());
Element ancestor = _parent;
StatefulElement statefulAncestor;
while (ancestor != null) {
if (ancestor is StatefulElement && matcher.check(ancestor.state))
statefulAncestor = ancestor;
ancestor = ancestor._parent;
}
return statefulAncestor?.state;
}
可以看出:
ancestorStateOfType的作用是： 如果某个父元素满足一定条件, 则返回这个父节点的state属性；
rootAncestorStateOfType的作用是： 返回最顶层的满足一定条件的父元素。
这个条件是： 这个元素必须属于StatefulElement , 而且其state属性与参数里的TypeMatcher 相符合。
查询源码可以知道：StatelessWidget 里的元素是StatelessElement，StatefulWidget里的元素是StatefulElement。
也就是说，要想让context.rootAncestorStateOfType(const TypeMatcher
这样我们就大概知道为什么会出错了。我们的showAlertDialog方法所用的context是属于MyApp的, 而MyApp是个StatelessWidget。
那么，修改方案就比较清晰了，我们的对话框所使用的context不能是顶层Widget的context，同时顶层Widget必须是StatefulWidget。
修改后的完整代码如下：
import 'package:flutter/material.dart';
main() {
runApp(new MyApp());
}class MyApp extends StatefulWidget {@override
State createState() {
return new MyState();
}
}
class MyState extends State{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Test',
home: new Scaffold(
appBar: new AppBar(title: new Text('Test')),
body: new StatelessWidgetTest(),
),
);
}}
class StatelessWidgetTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return _buildCenterButton(context);
}
}
Widget _buildCenterButton(BuildContext context) {
return new Container(
alignment: Alignment.center,
child: new Container(
child: _buildButton(context),
));
}Widget _buildButton(BuildContext context) {
return new RaisedButton(
padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
//padding
child: new Text(
'show dialog',
style: new TextStyle(
fontSize: 18.0, //textsize
color: Colors.white, // textcolor
),
),
color: Theme.of(context).accentColor,
elevation: 4.0,
//shadow
splashColor: Colors.blueGrey,
onPressed: () {
showAlertDialog(context);
});
}
void showAlertDialog(BuildContext context) {
NavigatorState navigator= context.rootAncestorStateOfType(const TypeMatcher());
debugPrint("navigator is null?"+(navigator==null).toString());
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("Dialog Title"),
content: new Text("This is my content"),
actions:[
new FlatButton(child:new Text("CANCEL"), onPressed: (){
Navigator.of(context).pop();
},),
new FlatButton(child:new Text("OK"), onPressed: (){
Navigator.of(context).pop();
},)
]
));
} 实验结果:
文章图片
screen1.png 至于为什么flutter里的对话框控件对BuildContext的要求这么严格，暂时还不清楚原因。
后记：
在flutter里，Widget，Element和BuildContext之间的关系是什么呢?
【flutter|flutter demo （四）（对话框）】摘抄部分系统源码如下：
abstract class Element extends DiagnosticableTree implements BuildContext{....}abstract class ComponentElement extends Element {}class StatelessElement extends ComponentElement {
@override
Widget build() => widget.build(this);
}class StatefulElement extends ComponentElement {
@override
Widget build() => state.build(this);
}abstract class Widget extends DiagnosticableTree {
Element createElement();
}abstract class StatelessWidget extends Widget {
@override
StatelessElement createElement() => new StatelessElement(this);
@protected
Widget build(BuildContext context);
}abstract class StatefulWidget extends Widget {
@override
StatefulElement createElement() => new StatefulElement(this);
@protected
State createState();
}
abstract class State extends Diagnosticable {
@protected
Widget build(BuildContext context);
} 推荐阅读
- 跌跌撞撞奔向你|跌跌撞撞奔向你 第四章（你补英语，我补物理）
- 奔向你的城市
- 四首关于旅行记忆的外文歌曲
- CET4听力微技能一
- 亲子日记第186篇，2018、7、26、星期四、晴
- 特种兵训练第四天
- 第四十三篇接纳孩子的感受
- 《自我的追寻》读书笔记3
- 不让记忆、感觉、情绪成为孩子的负累|不让记忆、感觉、情绪成为孩子的负累|《全脑教养法》（四）
- 亲子日记第三百四十二篇|亲子日记第三百四十二篇 暴雨