BottomNavigationBar

顯示在應用程序的底部，用于在少量視圖中進行選擇，通常在三到五之間。

底部導航欄通常與Scaffold結合使用，它作為Scaffold.bottomNavigationBar參數提供。

底部導航欄的類型更改其項目的顯示方式。如果未指定，則當少于四個項時它會自動設置為BottomNavigationBarType.fixed，否則為BottomNavigationBarType.shifting。

BottomNavigationBarType.fixed，當少于四個項目時的默認值。如果選中的項目為非null，則使用selectedItemColor渲染所選項目，否則使用主題的ThemeData.primaryColor。如果backgroundColor為null，則導航欄的背景顏色默認為Material背景顏色ThemeData.canvasColor（基本上是不透明的白色）。

BottomNavigationBarType.shifting，當有四個或更多項時的默認值。如果selectedItemColor為null，則所有項目都以白色呈現。導航欄的背景顏色與所選項目的BottomNavigationBarItem.backgroundColor相同。在這種情況下，假設每個項目將具有不同的背景顏色，并且背景顏色將與白色形成鮮明對比。

此示例顯示BottomNavigationBar，因為它在Scaffold小部件中使用。 BottomNavigationBar有三個BottomNavigationBarItem小部件，currentIndex設置為索引0.所選項目為琥珀色。 _onItemTapped函數更改所選項的索引，并在Scaffold的中心顯示相應的消息:

IMG

源碼：

int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
     'Index 1: Business',
     style: optionStyle,
  ),
  Text(
     'Index 2: School',
     style: optionStyle,
  ),
];

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          title: Text('School'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ),
  );
}

構造方法（Constructors）

創建一個底部導航欄，通常用作Scaffold的Scaffold.bottomNavigationBar參數。

    BottomNavigationBar({
        Key key, 
        @required List<BottomNavigationBarItem> items, 
        ValueChanged<int> onTap, 
        int currentIndex: 0, 
        double elevation: 8.0, 
        BottomNavigationBarType type, 
        Color fixedColor, 
        Color backgroundColor, 
        double iconSize: 24.0, 
        Color selectedItemColor, 
        Color unselectedItemColor, 
        double selectedFontSize: 14.0, 
        double unselectedFontSize: 12.0, 
        bool showSelectedLabels: true, 
        bool showUnselectedLabels 
    })

屬性（Properties）

• backgroundColor → Color

  背景顏色

• currentIndex → int

  當前活動BottomNavigationBarItem的項目索引(一般就是當前選中的那個項目索引)

• elevation → double

  此底部導航欄的Z坐標

• fixedColor → Color

  選中項目顏色的值（只讀）

• iconSize → double

  所有BottomNavigationBarItem圖標的大小

• items → List<BottomNavigationBarItem>

  定義在底部導航欄中排列的按鈕項的外觀

• onTap → ValueChanged<int>

  點擊其中一個項目時響應事件

• selectedFontSize → double

  選中時BottomNavigationBarItem標簽的字體大小

• selectedItemColor → Color

  選中時BottomNavigationBarItem.icon和BottomNavigationBarItem.label的顏色

• showSelectedLabels → bool

  是否為未選擇的BottomNavigationBarItems顯示標簽

• showUnselectedLabels → bool

  是否為選定的BottomNavigationBarItem顯示標簽

• type → BottomNavigationBarType

  定義BottomNavigationBar的布局和行為

• unselectedFontSize → double

  未選中BottomNavigationBarItem標簽的字體大小

• unselectedItemColor → Color

  未選中的BottomNavigationBarItem.icon和BottomNavigationBarItem.labels的顏色

• hashCode → int

  對象的哈希值（只讀）

• key → Key

  控制一個小部件如何替換樹中的另一個小部件

• runtimeType → Type

  表示對象的運行時類型(只讀)