Question

我正在尝试使用flutter框架创建抽屉式导航，但是我每次运行都会得到以下异常

引发了另一个异常：请求导航器操作并带有不包含导航器的上下文。

那是什么解决方案，有帮助吗？

我使用了Navigator类，如下所示

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new AppStates();
  }
}

class AppStates extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Application App Bar"),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              ListTile(
                title: Text("Next Page"),
                onTap: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => NextPage()));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

并且NextPage类的代码是

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Next Page App Bar"),
        ),
      ),
    );
  }
}

Answer 1

您似乎没有针对当前上下文的Navigator设置。而不是使用StatefulWidget，您应该尝试MaterialApp作为您的根应用程序。 MaterialApp为您管理一个导航器。这是一个如何在main.dart中设置应用的示例

void main() {
 runApp(MaterialApp(
   title: 'Navigation Basics',
   home: MyApp(),
 ));
}

Answer 2

这是因为您正在使用的context来自实际创建Navigator之前的应用程序级别。在Flutter中创建“简单”单文件应用程序时，这是一个常见问题。

有许多可能的解决方案。一种方法是将Drawer提取到自己的类中（相应地扩展Stateless/StatefulWidget），然后在build覆盖中，已经创建了包含{{ 1}}供您使用。

Scaffold

如果要将此Navigator保留在同一文件中，另一种方法是使用class MyDrawer extend StatelessWidget { @override Widget build(BuildContext context) { return Drawer( child: ListView( children: <Widget>[ ListTile( title: Text("Next Page"), onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage())); }, ) ], ), ); }，其效果相同：

Drawer

如何解决抖动异常：请求的导航器操作使用了不包含导航器的上下文

2 个答案: