一 簡(jiǎn)介

BottomNavigationBar是底部導(dǎo)航條，可以在tap之間切換和瀏覽頂級(jí)視圖。

二 屬性

currentIndex：int類型，用來切換按鈕控制
onTap:ValueChanged<int>按下某一個(gè)按鈕的回調(diào)
items:List<BottomNavigationBarItem>類型，底部導(dǎo)航條按鈕集

三 代碼示例

接下來是一個(gè)代碼示例，底部顯示錢包，應(yīng)用，我的，按鈕由圖標(biāo)加文本形式。

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  @override
  MainState createState() => MainState();
}

class MainState extends State<App> {
  var _currentIndex = 0;

  currentPage() {
    switch (_currentIndex) {
      case 0:
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: new BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          onTap: ((index) {
            setState(() {
              _currentIndex = index;
            });
          }),
          items: [
            new BottomNavigationBarItem(
                title: new Text(
                  '錢包',
                  style: TextStyle(
                      color: _currentIndex == 0
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 0
                    ? Image.asset(
                        'images/weixin_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/weixin_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
            new BottomNavigationBarItem(
                title: new Text(
                  '應(yīng)用',
                  style: TextStyle(
                      color: _currentIndex == 1
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 1
                    ? Image.asset(
                        'images/find_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/find_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
            new BottomNavigationBarItem(
                title: new Text(
                  '我的',
                  style: TextStyle(
                      color: _currentIndex == 2
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 2
                    ? Image.asset(
                        'images/contact_list_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/contact_list_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
          ]),
    );
  }
}

效果圖：

7981C8E4-A327-431D-BCDF-F23F97D877C3.png