如何在单击 BottomAppBar 图标时导航到新屏幕？答案

【问题标题】：how to Navigate to a new screen onclick BottomAppBar icon?如何在单击 BottomAppBar 图标时导航到新屏幕？
【发布时间】：2019-09-25 13:51:59
【问题描述】：

我想在 BottomAppBar 的单击图标上导航到新屏幕，但出现错误：在初始化器中只能访问静态成员

final makeBottom = Container(
height: 45.0,
child: BottomAppBar(
  color: Colors.white,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      IconButton(
        icon: Icon(Icons.home, color: Color.fromARGB(255, 30, 110, 160)),
        onPressed: navigateToPage,//only static members can be accessed in initializers
      ),
      IconButton(
        icon: Icon(Icons.search, color: Color.fromARGB(255, 30, 110, 160)),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.star, color: Color.fromARGB(255, 30, 110, 160)),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.favorite_border,
            color: Color.fromARGB(255, 30, 110, 160)),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.account_circle,
            color: Color.fromARGB(255, 30, 110, 160)),
        onPressed: () {},
      ),
    ],
  ),
),

);

方法 navigateToPage

 void navigateToPage() async {
Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) => Userqst(
              user: widget.user,
            ),
        fullscreenDialog: true));

}

【问题讨论】：

如果你写onPressed: () => navigateToPage()会发生什么？
你是在构造函数中创建这个吗？因为就我而言，这个错误应该只发生在构造函数上。如果您想将一些小部件存储在变量中（不知道您是否应该这样做，想），请在 initState 方法中执行此操作。
我在创建battomappbar的地方调用makeBottom方法，你说的是哪个构造函数？
我仍然有同样的错误我该怎么办？
@DjamilaJada 你有四个答案，与试图帮助你的人一起参与 cmets 可能会取得成功。

标签： dart flutter bottomappbar

【解决方案1】：

试试下面的代码..

return Scaffold{
bottomNavigationBar : bottomNav()  // call the Widget
}

Widget bottomNav(){
return new Container (
height :45.0,
//Copy the bottomAppBar code
);
}

【讨论】：

【解决方案2】：

问题可能是您的方法无法获取上下文所以在你的 Iconbutton 像这样传递上下文

IconButton(
        icon: Icon(Icons.home, color: Color.fromARGB(255, 30, 110, 160)),
        onPressed: (){navigateToPage(context);},//only static members can be accessed in initializers
      ),

并尝试像这样修改方法

 void navigateToPage(BuildContext context) async {
Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) => Userqst(
              user: widget.user,
            ),
        fullscreenDialog: true));
}

【讨论】：

【解决方案3】：

我认为您正在尝试从“Widget build(BuildContext context)”上下文构建该 Widget，这就是您遇到此问题的原因。

我为此考虑了 2 个解决方案。

首先，您将代码放入主函数“Widget build(BuildContext context)”中，然后在任何您想调用的地方调用 Widget。

@override
Widget build(BuildContext context){
  //here you put your "final makeBottom" code;
  return Scaffold(//and somewhere around there you place your "makeBottom" Widget);
}

其次，将您的整个代码包装为一个函数，该函数将返回该 Container()，然后将其调用到“构建”函数中。

Widget makeBottom(BuildContext context){
  return //your Container();
}

【讨论】：

【解决方案4】：

下面的代码可能会对你有所帮助 -

 class Home extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _HomeState();
      }
    }

    class _HomeState extends State<Home> {
      int _currentIndex = 0;
      final List<Widget> _children = [
        HomeListView(),
        MyGridView()
      ];
      var _title = 'Home';

      @override
      Widget build(BuildContext context) {

       return Scaffold(
          appBar: AppBar(
            backgroundColor: Color.fromRGBO(41, 167, 77, 50),
            title: Text(_title, textAlign: TextAlign.center),
          ),
          body: _children[_currentIndex],
          bottomNavigationBar: BottomNavigationBar(

            onTap: onTabTapped,
            selectedItemColor: Color.fromRGBO(33, 137, 38, 60),
            type: BottomNavigationBarType.fixed,
            backgroundColor: Color.fromRGBO(252, 207, 3, 60),
            currentIndex: _currentIndex,
            // this will be set when a new tab is tapped
            items: [
              BottomNavigationBarItem(
                icon: new Icon(Icons.home),
                title: new Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: new Icon(Icons.mail),
                title: new Text('My Venue'),
              )
                ],
          ),
        );
      }

      void onTabTapped(int index) {
        setState(() {
          _currentIndex = index;
          switch (index) {
            case 0:
              _title = 'Home';
              break;
            case 1:
              _title = 'My Venue';
              break;

          }
        });
      }
    }

【讨论】：