Flutter Material Components Widgets之BottomNavigationBar

BottomNavigationBar 底部导航条，可以很容易地在tap之间切换和浏览顶级视图。

BottomNavigationBar 显示在应用程序底部的Widget，用于在少量视图中进行选择，通常在3到5之间。

构造函数

 BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.fixedColor,
    this.iconSize = 24.0,
  }) 

• items → List < BottomNavigationBarItem >
  BottomNavigationBar 底部导航栏中的各项，其中每个项目都是一个BottomNavigationBarItem 包含了图标和标题。

• onTap → ValueChanged < int >
  点击某一项时回调int参数为点击的具体某一项

• currentIndex → int
  指定选中的一项

• type → BottomNavigationBarType
  定义BottomNavigationBar的布局和行为

  – BottomNavigationBarType.fixed
  每一项都固定宽并且点击时不会移动
  BottomNavigationBar 的背景颜色为 ThemeData.canvasColor

  – BottomNavigationBarType.shifting
  点击某一项时会有移动并且，只有选中的项才显示其文本标签。
  BottomNavigationBar 的背景颜色与所选项的BottomNavigationBarItem.backgroundColor相同

• fixedColor → Color
  底部导航栏为的type为BottomNavigationBarType.fixed时所选中项的颜色

• iconSize → double
  所有BottomNavigationBarItem图标的大小默认24

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  State createState() {
    return new HomeState();
  }
}

class HomeState extends State {

  BottomNavigationBar _bottomNavigationBar;
  List _items;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _items = [
      new BottomNavigationBarItem(
        icon: new Icon(Icons.assessment),
        title: new Text("test1"),
        backgroundColor: Colors.green
      ),
      new BottomNavigationBarItem(
        icon: new Icon(Icons.minimize),
        title: new Text("test2"),
      ),
      new BottomNavigationBarItem(
        icon: new Icon(Icons.hdr_strong),
        title: new Text("test3"),
      ),
      new BottomNavigationBarItem(
        icon: new Icon(Icons.menu),
        title: new Text("test4"),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    _bottomNavigationBar = new BottomNavigationBar(items: _items,
      currentIndex: _currentIndex,
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.purple,
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
    );

    return new MaterialApp(
      title: "BottomNavigationBar",
      theme: new ThemeData(primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("BottomNavigationBar"),
        ),
        body: new Center(
          child: new Text("$_currentIndex"),
        ),
        bottomNavigationBar: _bottomNavigationBar,
      ),
    );
  }

}