我正在尝试使用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"),
),
),
);
}
}
看起来您没有针对当前上下文的Navigator设置。您应该尝试使用MaterialApp作为根应用程序,而不是使用StatefulWidget。 MaterialApp为您管理导航器。以下是如何在main.dart中设置应用程序的示例
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: MyApp(),
));
}
这是因为您使用的context
是在实际创建Navigator
之前的应用程序级别。在Flutter中创建“简单”单个文件应用程序时,这是一个常见问题。
有许多可能的解决方案。一个是将你的Drawer
提取到它自己的类中(相应地扩展Stateless/StatefulWidget
),然后在它的build
覆盖中,已经创建了包含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
保存在同一个文件中,则使用Builder
代替,这具有相同的效果:
drawer: Builder(builder: (context) =>
Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text("Next Page"),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => NextPage()));
},
)
],
),
),
),