Flutter-BottomNavigationBar的使用說明

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

講這個Widget之前我們先溫習一下之前兩個Widgets

Flutter-AppBar的使用說明

Flutter-TabBar的使用說明

BottomNavigationBar的定義

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

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

BottomNavigationBar的簡單使用

BottomNavigationBar首先展示一下點擊底部按鈕沒有反應的demo，就相當于是一個空白的紙張，等候后續(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('商務')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.my_location),
              title: Text('定位')
          ),
        ]
    ),
    );
  }
}

運行效果如下所示：

simple.jpg

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

BottomNavigationBar的完善

要想對底部TabBar的按鈕點擊進行頁面切換，需要有狀態(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;//記錄當前選擇的是哪一個
  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('商務')
            ),
            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
      ),),
    );
  }
}
//商務頁面
class BusinessPage 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
      ),),
    );
  }
}
//定位頁面
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
      ),),
    );
  }
}

運行效果：

clicked.jpg