Flutter-BottomNavigationBar的使用說明

在目前的app使用過程中,，使用最多的場景莫過于有一個底部的Tabbar，在Flutter中也有類似的Widget,，這個Widget就是今天要為大家介紹的BottomNavigationBar,；BottomNavigationBar這個Widget在Scaffold這個Widget下面。

講這個Widget之前我們先溫習(xí)一下之前兩個Widgets

Flutter-AppBar的使用說明

Flutter-TabBar的使用說明

BottomNavigationBar的定義

BottomNavigationBar在使用之前,，我們看下常用的屬性有哪些：

BottomNavigationBar({
    Key key,
    @required this.items,//必須要實現(xiàn)的,，最少要有兩個子widgets
    this.onTap,//點擊事件，知道當(dāng)前點擊的是哪一個widget
    this.currentIndex = 0,//當(dāng)前顯示的是哪一個widget
    this.elevation = 8.0,
    BottomNavigationBarType type,//設(shè)置items的布局
    Color fixedColor,//相當(dāng)于selectedItemColor,，但是不能跟selectedItemColor同時存在
    this.backgroundColor,//設(shè)置背景顏色
    this.iconSize = 24.0,//設(shè)置圖標(biāo)大小
    Color selectedItemColor,//設(shè)置選中時的顏色
    this.unselectedItemColor,//設(shè)置沒選中時的顏色
    this.selectedIconTheme = const IconThemeData(),//設(shè)置選中時的icon的主題
    this.unselectedIconTheme = const IconThemeData(),//設(shè)置沒選中時的icon的主題
    this.selectedFontSize = 14.0,//設(shè)置選中時文字大小
    this.unselectedFontSize = 12.0,//設(shè)置沒選中時的文字大小
    this.selectedLabelStyle,//設(shè)置選中時的labe樣式
    this.unselectedLabelStyle,//設(shè)置沒選中時的labe樣式
    this.showSelectedLabels = true,//設(shè)置選中時是否顯示文字
    bool showUnselectedLabels,//設(shè)置沒選中時是否顯示文字
  })

BottomNavigationBar的簡單使用

BottomNavigationBar首先展示一下點擊底部按鈕沒有反應(yīng)的demo,，就相當(dāng)于是一個空白的紙張,，等候后續(xù)再去填充。演示代碼如下：

class NavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: SimpleNavBarDemo(),
    );
  }}class SimpleNavBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('SimpleNavBarDemo'),
      ),//      body: ,
    bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
            title: Text('首頁')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('商務(wù)')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.my_location),
              title: Text('定位')
          ),
        ]
    ),
    );
  }}

運行效果如下所示： 

這個時候的底部Tabbar已經(jīng)創(chuàng)建完成,，點擊按鈕也有反應(yīng),，但是在點擊的時候不會進(jìn)行切換，下面我們就對其進(jìn)行完善,。

BottomNavigationBar的完善

要想對底部TabBar的按鈕點擊進(jìn)行頁面切換,，需要有狀態(tài)的Widget，就要在創(chuàng)建的時候聲明為StatefulWidget,，下面請看代碼：

class NavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: ClickedNavBarDemo(),
    );
  }}class ClickedNavBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ClickedNavBarDemoState();}class ClickedNavBarDemoState extends State<ClickedNavBarDemo> {
  int _current_index = 0;//記錄當(dāng)前選擇的是哪一個
  final List<Widget> _pages = [//裝在頁面
    HomePage(),
    BusinessPage(),
    MyLocationPage()
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ClickedNavBarDemoState'),
      ),
      body: _pages[_current_index],//展示組件
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: true,
        type: BottomNavigationBarType.fixed,fixedColor: Colors.redAccent,//        unselectedLabelStyle: TextStyle(color: Colors.orange),
        unselectedItemColor: Colors.grey,//        selectedItemColor: Colors.orange,
        currentIndex: _current_index,
        onTap: (int index) {//點擊事件
          setState(() {//修改狀態(tài),，會自動刷新Widget
            this._current_index = index;
          });
        },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('首頁')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.business),
                title: Text('商務(wù)')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.my_location),
                title: Text('定位')
            ),
          ]
      ),
    );
  }}//首頁頁面class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('首頁', style: TextStyle(
        color: Colors.black,
        fontSize: 40.0
      ),),
    );
  }}//商務(wù)頁面class BusinessPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('商務(wù)', style: TextStyle(
          color: Colors.black,
          fontSize: 40.0
      ),),
    );
  }}//定位頁面class MyLocationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('定位', style: TextStyle(
          color: Colors.black,
          fontSize: 40.0
      ),),
    );
  }}

運行效果：