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()),
                    );
                  },
                ),
              ],
            ),
          )),
    );
  }
}

当我单击任何一个IconButton时，它显示以下错误消息：

使用不包含导航器的上下文请求的导航器操作。

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()),
                    );
                  },
                )

Answer 2

您不能在Material App小部件下执行此操作（出于上下文目的）

MaterialApp(
      title: 'Top navigation Bar',
      home:HomePage()
);

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Scaffold( //Your code inside Scaffold..);
}
}

IconButton onPressed函数抛出错误代码

2 个答案: