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

Question

当我在 flutter 中单击 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."),);
  }
}