flutter demo （四）：對話框

時間  2019-12-06
標籤 flutter demo 對話框 简体版
原文   原文鏈接

我在使用flutter裏的對話框控件的時候遇到了一個奇怪的錯誤：git

Another exception was thrown: Navigator operation requested with a context that does not include a Navigator
複製代碼

研究了一下才知道，flutter裏的dialog不是隨便就能用的。github

原代碼以下：bash

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:<Widget>[
            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相關的操做。有點莫名其妙。app

分析下源碼吧~

看showDialog方法的源碼：less

Future<T> showDialog<T>({
  @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<T>(
    child: child ?? new Builder(builder: builder),
    theme: Theme.of(context, shadowThemeOnly: true),
    barrierDismissible: barrierDismissible,
    barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
  ));
}

複製代碼

Navigator.of 的源碼:ide

static NavigatorState of(
    BuildContext context, {
      bool rootNavigator: false,
      bool nullOk: false,
    }) {
    final NavigatorState navigator = rootNavigator
        ? context.rootAncestorStateOfType(const TypeMatcher<NavigatorState>())
        : context.ancestorStateOfType(const TypeMatcher<NavigatorState>());
    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()) 是null。函數

Navigator.of函數有3個參數，第一個是BuildContext，第二個是rootNavigator，默認爲false，可不傳，第三個是nullOk，默認爲false，可不傳。rootNavigator的值決定了是調用ancestorStateOfType仍是rootAncestorStateOfType，nullOk的值決定了若是最終結果爲null值時該拋出異常仍是直接返回一個null。測試

咱們作個測試，傳入不一樣的rootNavigator和nullOk的值，看有什麼結果：ui

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:<Widget>[
//            new FlatButton(child:new Text("CANCEL"), onPressed: (){
//              Navigator.of(context).pop();
//
//            },),
//            new FlatButton(child:new Text("OK"), onPressed: (){
//              Navigator.of(context).pop();
//
//            },)
//          ]
//
//      ));
}
複製代碼

打印結果：this

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())的返回值不爲null， 必須保證context所在的Widget的頂層Widget屬於StatefulWidget（注意是頂層Widget，而不是本身所在的widget。若是context所在的Widget就是頂層Widget，也是不能夠的）。

這樣咱們就大概知道爲何會出錯了。咱們的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<StatefulWidget> createState() {
    return new MyState();
  }
}
class MyState extends State<MyApp>{
  @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<NavigatorState>());
  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:<Widget>[
            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的要求這麼嚴格，暫時還不清楚緣由。

如何知道用戶點的是"OK"仍是"CANCEL"呢?

咱們能夠借鑑下 github.com/flutter/flu… 官方demo裏的寫法:

Widget _buildButton(BuildContext context) {
    return new RaisedButton(
        padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
        //padding
        child: new Text(
          'test 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: () {
          showDemoDialog<DialogItemAction>(
              context: context,
              child: new AlertDialog(
                  title: new Text("Dialog Title"),
                  content: new Text("This is is a dialog"),
                  actions: <Widget>[
                    new FlatButton(
                      child: new Text("CANCEL"),
                      onPressed: () {
                        Navigator.pop(context, DialogItemAction.cancel);
                      },
                    ),
                    new FlatButton(
                      child: new Text("OK"),
                      onPressed: () {
                        Navigator.pop(context, DialogItemAction.agree);
                      },
                    )
                  ]));
        });
  }

  void showDemoDialog<T>({BuildContext context, Widget child}) {
    showDialog<T>(
      context: context,
      builder: (BuildContext context) => child,
    ).then<void>((T value) {
      // The value passed to Navigator.pop() or null.
      if (value != null) {
        _scaffoldKey.currentState.showSnackBar(
            new SnackBar(content: new Text('hey, You selected: $value')));
      }
    });
  }
複製代碼

最終的完整源碼:

import 'package:flutter/material.dart';

main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(title: 'Test', home: new TestMyApp());
  }
}

class TestMyApp extends StatefulWidget {
  @override
  TestMyAppState createState() => new TestMyAppState();
}

enum DialogItemAction {
  cancel,
  agree,
}

class TestMyAppState extends State<TestMyApp> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        key: _scaffoldKey,
        appBar: new AppBar(title: const Text('Dialogs')),
        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(
          'test 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: () {
          showDemoDialog<DialogItemAction>(
              context: context,
              child: new AlertDialog(
                  title: new Text("Dialog Title"),
                  content: new Text("This is is a dialog"),
                  actions: <Widget>[
                    new FlatButton(
                      child: new Text("CANCEL"),
                      onPressed: () {
                        Navigator.pop(context, DialogItemAction.cancel);
                      },
                    ),
                    new FlatButton(
                      child: new Text("OK"),
                      onPressed: () {
                        Navigator.pop(context, DialogItemAction.agree);
                      },
                    )
                  ]));
        });
  }

  void showDemoDialog<T>({BuildContext context, Widget child}) {
    showDialog<T>(
      context: context,
      builder: (BuildContext context) => child,
    ).then<void>((T value) {
      // The value passed to Navigator.pop() or null.
      if (value != null) {
        _scaffoldKey.currentState.showSnackBar(
            new SnackBar(content: new Text('hey, You selected: $value')));
      }
    });
  }
}

複製代碼

後記：

在flutter裏，Widget，Element和BuildContext之間的關係是什麼呢?

摘抄部分系統源碼以下：

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<T extends StatefulWidget> extends Diagnosticable {
  @protected
  Widget build(BuildContext context);
}

複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程