IconButton onPressed 函数抛出错误代码答案

【问题标题】：IconButton onPressed function throws out an error codeIconButton onPressed 函数抛出错误代码
【发布时间】：2020-12-12 11:07:24
【问题描述】：

我目前正在使用 Flutter 开发一个应用程序。我构建了一个 AppBar 和一个带有 IconButtons 的底部导航栏，它们都应该路由到不同的页面。当我执行时，它会显示一条错误消息。

代码如下：

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

当我单击任何图标按钮时，它会显示以下错误消息：

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

【问题讨论】：

您是否尝试过在 MaterialPageRoute 中传递下划线（_）而不是上下文。
是的，但它仍然返回相同的错误。

标签： flutter dart

【解决方案1】：

您不能在 Material App 小部件下执行此操作（使用上下文）试试这个

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

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

【讨论】：

【解决方案2】：

您可以做两件事来消除您的错误/错误。

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

并将其用于MaterialApp 中的bottomNavigationBar

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

【讨论】：

精彩@NotTschuschl 一切顺利:)