单击图标时 BottomNavigationBarItem 打开相应的页面

Question

当我在颤动中单击 BottomNavigationBarItem 中的图标时，我正在寻找打开一个页面。

我尝试使用索引，但我无法理解是我将所有图标都放在一个列表中然后如何获取它。

 class CustomAppBar extends StatelessWidget {
 final List<BottomNavigationBarItem> bottomBarItems = [];

  final bottomNavigationBarItemStyle = TextStyle(fontStyle: 
    FontStyle.normal, color: Colors.black);

  CustomAppBar() {
   bottomBarItems.add(
   BottomNavigationBarItem(icon: Icon(Icons.home,color: Colors.brown,),
     title: Text("Explore", style: 
    bottomNavigationBarItemStyle.copyWith(color: Colors.green)),
     ),
  );
  bottomBarItems.add(new BottomNavigationBarItem(icon: new 
     Icon(Icons.favorite,color: Colors.black,),
      title: Text("Watchlist",style: bottomNavigationBarItemStyle,),
   ),
  );
   bottomBarItems.add(new BottomNavigationBarItem(icon: new 
      Icon(Icons.local_offer,color: Colors.black,),
       title: Text("Deals",style: bottomNavigationBarItemStyle,),
   ),
    );
  bottomBarItems.add(new BottomNavigationBarItem(icon: new 
   Icon(Icons.notifications,color: Colors.black,),
    title: Text("Notifications",style: bottomNavigationBarItemStyle,),
  ),
   );
   }

   @override
   Widget build(BuildContext context) {
   return Material(
     elevation: 15.0,
     child: BottomNavigationBar(
      items: bottomBarItems,
       type: BottomNavigationBarType.fixed,
      ),
     );
    }
   }

   /*class NewPage extends StatelessWidget {
  String title;
  NewPage(this.title);
   @override
   Widget build(BuildContext context) {
   return Scaffold(
   body: Center(child: Text(title),),

    );
    }
   }*/

Answer 1

这是您的解决方案，尽管我真的建议您查找教程或类似的东西以完全理解它。

import 'package:flutter/material.dart';

class YourApplication extends StatefulWidget {
  @override
  YourApplicationState createState() {
    return new YourApplicationState();
  }
}

class YourApplicationState extends State<YourApplication> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _getBody(index),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (value) => setState(() => index = value),
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text(
              "Explore",
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.favorite,
            ),
            title: Text(
              "Watchlist",
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.notifications,
            ),
            title: Text(
              "Notifications",
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.local_offer,
            ),
            title: Text(
              "Deals",
            ),
          ),
        ],
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  Widget _getBody(int index) {
    switch (index) {
      case 0:
        return _buildFirstPage(); // Create this function, it should return your first page as a widget
      case 1:
        return _buildSecondPage(); // Create this function, it should return your second page as a widget
      case 2:
        return _buildThirdPage(); // Create this function, it should return your third page as a widget
      case 3:
        return _buildFourthPage(); // Create this function, it should return your fourth page as a widget
    }

    return Center(child: Text("There is no page builder for this index."),);
  }
}

Answer 2

使用IconButton而不是Icon 。 这是一个例子：

BottomNavigationBarItem(
          icon: IconButton(
            icon: Icon(Icons.home),
            onPressed: () {
              Navigator.push(
               context,
                   MaterialPageRoute(builder: (context) => NewPage()),
              );
            },
          ),
        ),

Answer 3

我建议阅读这篇简短的文章以了解如何使用BottomNavigationBar小部件。 这是一个可以帮助您入门的教程。

简而言之，您必须为小部件提供状态，因为您正在尝试更改页面。 无状态小部件将不知道哪个图标当前处于活动状态。 此外，您必须提供回调作为BottomNavigationBar小部件的参数，它会在点击图标时设置当前活动的索引，以便 NavigationBar 知道要显示哪个页面。

Answer 4

你也可以这样实现它：

BottomNavigationBarItem(
  icon: IconButton(
   icon: Icon(Icons.home),
   onPressed: () {
     Navigator.of(context).push(
       MaterialPageRoute(
         builder: (context) => YourPage(),
       ),
     );
   },
 ),
 label: 'Home',
)