Flutter -------- BottomNavigationBar 界面切換

Android 中有BottomNavigationBar+Fragment切換

而在Flutter也有的BottomNavigationBar

效果圖

 

 

底部有兩種狀況

底部導航欄的類型更改其項目的顯示方式。若是未指定，則 當少於四個項時，它會自動設置爲BottomNavigationBarType.fixed， 不然爲BottomNavigationBarType.shifting。

BottomNavigationBarType.fixed，當少於四個項目時的默認值。若是選中的項爲非null，則使用fixedColor渲染，不然使用主題的ThemeData.primaryColor。導航欄的背景顏色是默認的材質背景顏色，ThemeData.canvasColor（基本上是不透明的白色）。

BottomNavigationBarType.shifting，當有四個或更多項時的默認值。全部項目都以白色呈現，導航欄的背景顏色與所選項目的BottomNavigationBarItem.backgroundColor相同 。在這種狀況下，假設每一個項目將具備不一樣的背景顏色，而且背景顏色將與白色造成鮮明對比。

 

超出4個默認狀況：

 

代碼：

class BottomNavigationBarLnt extends StatefulWidget {
  BottomNavigationBarLnt({Key key}) : super(key: key);

  @override
  BottomNavigationBarTest createState() => BottomNavigationBarTest();
}

class BottomNavigationBarTest extends State<BottomNavigationBarLnt>{

  int _cuurentIndex = 0;
  final List<Widget> chiledList = [Home(),Tab2(),Tab3(),Home()];
  final List<BottomNavigationBarItem> _listItem = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text("Home")
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.book),
      title: Text("book")
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.music_video),
      title: Text("music")
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.movie),
        title: Text("movie")
    ),
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
          items: _listItem,
          fixedColor: Colors.blue,
         // type: BottomNavigationBarType.fixed,
          currentIndex: _cuurentIndex,
          onTap: _onItemTapped,
      ),
      body: chiledList[_cuurentIndex],
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _cuurentIndex = index;
    });
  }
}

 超過4個item時添加類型  type: BottomNavigationBarType.fixed, 

把上面註釋的代碼打開就行

 

 

 

官方文檔
https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html