【Flutter学习】基本组件之BottomNavigationBar底部导航栏

一，概述

　　BottomNavigationBar即是底部导航栏控件，显示在页面底部的设计控件，用于在试图切换，底部导航栏包含多个标签、图标或者两者搭配的形式，简而言之提供了顶级视图之间的快速导航。

二，Bar关键元素

• BottomNavigationBar　　
  
  • BottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用。
    
  • BottomNavigationBar构造方法

     BottomNavigationBar({
        Key key,
        @required this.items,
        this.onTap,
        this.currentIndex = ,
        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 = ;
      }
  
        /** 如果点击的导航页不是当前项，切换*/
      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],
      );
   }
  }