Flutter入门（6）BottomNavigationBar

   android开发都有底部导航栏，Flutter总有自带的底部导航栏。

   BottomNavigationBar 于 PageView 相互使用，pageView 类似于android中的ViewPage。

import 'package:flutter/material.dart';
import 'package:flutter_app/http/ApiService.dart';
import 'package:flutter_app/bean/project_content_entity.dart';
import 'package:flutter_app/modular/home_page.dart';
import 'package:flutter_app/modular/navi_page.dart';
import 'package:flutter_app/modular/project_page.dart';
import 'package:flutter_app/modular/tree_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyState();
  }
}

class MyState extends State<MyApp> {
  var _currentIndex = 0;
  final PageController _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          //类似于ViewPage滑动
          physics: NeverScrollableScrollPhysics(), //禁止滑动
          controller: _controller,
          onPageChanged: _onPageChange,
          children: <Widget>[HomePage(), ProjectPage(), TreePage(), NaviPage()],
        ),
        bottomNavigationBar: BottomNavigationBar(
          onTap: _onTap,
          currentIndex: _currentIndex,
          type: BottomNavigationBarType.fixed, //样式有两种不同的样式
          items: [
            _createBottomNavigationBarItem(
                Icons.home, Colors.grey, Colors.blue, 0, '首页'),
            _createBottomNavigationBarItem(
                Icons.school, Colors.grey, Colors.blue, 1, '项目'),
            _createBottomNavigationBarItem(Icons.format_indent_decrease,
                Colors.grey, Colors.blue, 2, '体系'),
            _createBottomNavigationBarItem(Icons.picture_in_picture_alt,
                Colors.grey, Colors.blue, 3, '导航'),
          ],
        ),
      ),
    );
  }

  _createBottomNavigationBarItem(IconData icon, Color unSelectColor,
      Color selectColor, int index, String tabName) {
    return BottomNavigationBarItem(
      icon: Icon(
        //未选中图片
        icon,
        color: unSelectColor,
      ),
      title: Text(
        tabName,
        style: TextStyle(
            color: _currentIndex == index ? Colors.blue : Colors.grey),
      ),
      activeIcon: Icon(
        //选中图片
        icon,
        color: selectColor,
      ),
    );
  }

  //tabBar点击更改
  void _onTap(int index) {
    setState(() {
      _controller.jumpToPage(index); //跳转切换页面
      _currentIndex = index;
    });
  }

  //page更改状态
  void _onPageChange(int index) {
    setState(() {
      _currentIndex = index; //更新当前页面下标
    });
  }
}

切换的页面 HomePage ，ProjectPage，TreePage，NaviPage。都是类似，我就贴一个HomePage了。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("Home"),),
    );
  }

}

效果图：