flutter - IconButton onPressed函数抛出错误代码

Question

我目前正在使用Flutter开发应用程序。我构建了带有IconButtons的AppBar和Bottomnavigationbar，它们应该都路由到不同的页面。当我执行时，虽然显示错误消息。
这是代码:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Top navigation Bar',
      home: Scaffold(
          appBar: AppBar(
              backgroundColor: Color.fromARGB(250, 250, 250, 250),
              elevation: 0,
              actions: <Widget>[
                IconButton(
                  icon: Icon(
                    Icons.account_circle,
                    size: 40.0,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => MyLoginPage()),
                    );
                  },
                )
              ]),
          body: Center(
            child: Text('NewsPage'),
          ),
          bottomNavigationBar: SizedBox(
            height: 60,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.info_outline),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => MyApp()),
                    );
                  },
                ),
                IconButton(
                  icon: Icon(Icons.calendar_today),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => MyShedulePage()),
                    );
                  },
                ),
                IconButton(
                  icon: Icon(Icons.assignment_ind),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => MyAttendancePage()),
                    );
                  },
                ),
              ],
            ),
          )),
    );
  }
}

当我单击任何IconButtons时，它显示以下错误消息:

Navigator operation requested with a context that does not include a Navigator.

Answer 1

您可以执行两件事来删除错误/错误。
1.在另一个无状态小组件中构建BottomNavigationBar:

class MyBottomNavigationBar extends StatelessWidget{
   Widget build(BuildContext context) {
    return SizedBox(
      height: 60,
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.info_outline),
            onPressed: () {
              Navigator.push(
                context,
                // MYHomePage is another page for showcase
                // replace it with your page name
                MaterialPageRoute(builder: (context) => MyHomePage()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.calendar_today),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => MyHomePage()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.assignment_ind),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => MyHomePage()),
              );
            },
          ),
        ],
      ),
    );
   }
}

并将其用于 bottomNavigationBar中的 MaterialApp

bottomNavigationBar: MyBottomNavigationBar()

2.使用Builder class 将您的bottomNavigationBar项目包装在 Builder()中

 bottomNavigationBar: Builder(
   builder: (context) => SizedBox(
        height: 60,
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.info_outline),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyApp()),
                );
              },
            ),
            IconButton(
              icon: Icon(Icons.calendar_today),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyShedulePage()),
                );
              },
            ),
            IconButton(
              icon: Icon(Icons.assignment_ind),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => MyAttendancePage()),
                );
              },
            ),
          ],
        ),
       )
      )

这是为您演示 的演示，使用我的答案中的点1，将 MyHomePage()作为另一个要从 MyApp推送到的小部件

请注意:您不能使用 Navigator.push从同一页面转到同一页面。在这里的代码中，您将推送至 MyApp()。所以请照顾好

               // please see here, not a good practise. Make sure
               // page is different, not same
               IconButton(
                  icon: Icon(Icons.info_outline),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => MyApp()),
                    );
                  },
                )