單擊圖標時 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',
)