如何修復顫振異常：使用不包含導航器的上下文請求導航器操作

Question

我正在嘗試使用顫振框架創建抽屜導航，但每次運行時都會出現以下異常

引發了另一個異常：使用不包含導航器的上下文請求的導航器操作。

那么解決方案是什么，有什么幫助嗎？

我使用 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

您似乎沒有針對當前上下文的導航器設置。 您應該嘗試將 MaterialApp 作為您的根應用程序，而不是使用 StatefulWidget。 MaterialApp 為您管理導航器。 這是如何在 main.dart 中設置應用程序的示例

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

Answer 2

這是因為您使用的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()));
              },
            )
          ],
        ),
      ),
    ),

Answer 3

使用 StatelessWidget 不是有狀態的小部件