flutter之底部导航——BottomNavigationBar

质感设计之底部导航栏几乎是所有app的主流结构，那么今天我们就来学习如何实现。网上资料也比较老， 有的还是自己写的，使用不是很方便。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      title: 'flutter 示例',
      home: new NavigationBarWidget(),
    ),
  );
}

class NavigationBarWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new NavigationBarState();
  }
}

class NavigationBarState extends State<NavigationBarWidget> {
  String menuStr = 'menu';
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('navigationBar 示例'),
        centerTitle: true,
      ),
      body: new Center(
        child: new Text(menuStr),//body内容
      ),
      bottomNavigationBar: new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: new Icon(Icons.settings), title: new Text('tools')),
          new BottomNavigationBarItem(
              icon: new Icon(
                Icons.games,//此处图片可以自定义
              ),
              title: new Text('games')),
          new BottomNavigationBarItem(
              icon: new Icon(
                Icons.person,
              ),
              title: new Text('me'))
        ],
        selectedItemColor: Colors.blue,//选中后标签颜色
        unselectedItemColor: Colors.black26,//未选中标签颜色
        currentIndex: _currentIndex,//选中项的下标
        onTap: (int index) {//事件
          setState(() {
            _currentIndex = index;
            menuStr = "menu index is $index";
          });
        },
      ),
    );
  }
}