【Flutter學習】基本組件之BottomNavigationBar底部導航欄

一，概述

　　BottomNavigationBar即是底部導航欄控件，顯示在頁面底部的設計控件，用於在試圖切換，底部導航欄包含多個標簽、圖標或者兩者搭配的形式，簡而言之提供了頂級視圖之間的快速導航。

二，Bar關鍵元素

• BottomNavigationBar　　
  
  • BottomNavigationBar 是屬於 Scaffold 中的一個位於底部的控件。通常和 BottomNavigationBarItem 配合使用。
    
  • BottomNavigationBar構造方法
    

     BottomNavigationBar({
        Key key,
        @required this.items,  
        this.onTap,
        this.currentIndex = 0,
        BottomNavigationBarType type,
        this.fixedColor,
        this.iconSize = 24.0,
      })

  • BottomNavigationBar 參數含義
    

    
    
    

• BottomNavigationBarItem
  
  • 底部導航欄要顯示的Item，有圖標和標題組成
    
    
  • BottomNavigationBarItem構造方法
    

      const BottomNavigationBarItem({
        @required this.icon,
        this.title,
        Widget activeIcon,
        this.backgroundColor,
      })

  • BottomNavigationBarItem 參數含義
    
    

三，實現過程

• 1.構建底部標簽
  

   // 導航圖標
     final List<BottomNavigationBarItem> bottomNavItems = [
       new BottomNavigationBarItem(
         backgroundColor: Colors.blue,
         icon: Icon(Icons.home),
         title: new Text("首頁")
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.green,
         icon: Icon(Icons.message),
         title: new Text('消息')
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.amber,
         icon: Icon(Icons.shopping_cart),
         title: new Text("購物車")
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.red,
         icon: Icon(Icons.person),
         title: Text('個人中心')
       )
     ];

• 2.構建導航顯示的頁面
  

   //視圖view
      final pageViews = [
          new HomePage(),
          new MsgPage(),
          new CartPage(),
          new PersonPage()
      ];

• 2.創建底部導航欄
  

        /** 如果點擊的導航頁不是當前項，切換*/
      void _changePage(int index) {
       if(index != currentIndex){
         setState(() {
           currentIndex = index;
         });
       }
      }
   
      @override
      Widget build(BuildContext context) {
      // TODO: implement build
      return new DefaultTabController(
        length: myTabs.length,
        child:  new Scaffold(
          appBar: new AppBar(
            title: new Text('頂部標簽欄'),
            bottom: new TabBar(
              indicatorColor: Colors.blue,
              tabs: myTabs,
              isScrollable: true,
            ),
          ),
         
          bottomNavigationBar: new BottomNavigationBar(
            items: bottomNavItems,
            currentIndex: currentIndex,
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
               _changePage(index);
            },
          ), 
          body: pageViews[currentIndex],
        ),
    );
  }
   

• 3.完成
  

  import 'package:flutter/material.dart';
  import './HomePage.dart';
  import './CartPage.dart';
  import './MsgPage.dart';
  import './PersonPage.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new MaterialApp(
        title: '頁面布局',
        theme:new ThemeData(
          primarySwatch: Colors.red
        ),
        home: new App(),
      );
    }
  }
  
  class App extends StatefulWidget {
  
    @override
    State<StatefulWidget> createState() {
      // TODO: implement createState
      return new AppState();
    }
  }
  
  class AppState extends State<App> {
  
      // 導航圖標
     final List<BottomNavigationBarItem> bottomNavItems = [
       new BottomNavigationBarItem(
         backgroundColor: Colors.blue,
         icon: Icon(Icons.home),
         title: new Text("首頁")
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.green,
         icon: Icon(Icons.message),
         title: new Text('消息')
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.amber,
         icon: Icon(Icons.shopping_cart),
         title: new Text("購物車")
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.red,
         icon: Icon(Icons.person),
         title: Text('個人中心')
       )
     ];
  
     int currentIndex;
  
     //視圖view
      final pageViews = [
          new HomePage(),
          new MsgPage(),
          new CartPage(),
          new PersonPage()
      ];
  
      @override
      void initState() {
        super.initState();
        currentIndex = 0;
      }
  
        /** 如果點擊的導航頁不是當前項，切換*/
      void _changePage(int index) {
       if(index != currentIndex){
         setState(() {
           currentIndex = index;
         });
       }
      }
   
      @override
      Widget build(BuildContext context) {
      // TODO: implement build
      return  new Scaffold(
          appBar: new AppBar(
            title: new Text('頂部標簽欄'),
          ),
         
          bottomNavigationBar: new BottomNavigationBar(
            items: bottomNavItems,
            currentIndex: currentIndex,
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
               _changePage(index);
            },
          ), 
          body: pageViews[currentIndex],
      );
   }
  }