15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化

效果：

/**

 * Flutter  BottomNavigationBar 自定义底部导航条、以及实现页面切换：

 * BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换，

 * bottomNavigationBar是Scaffold组件的参数。

 *BottomNavigationBar常见的属性：

 items  List<BottomNavigationBaritem> 底部导航条按钮集合。

 iconSize icon

 currentIndex 默认选中第几个

 onTap 选中变化回调函数

 fixedColor 选中的颜色

 type  

 BottomNavigationBarType.fixed

 BottomNavigationBarType.shifting

*/

main.dart

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Tabs(),
    );
  }
}

pages/Tabs.dart

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap: (int index) {
            // print(index);
            setState(() {
              this._currentIndex = index;
            });
          },
          iconSize: 36.0,
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.red,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
            BottomNavigationBarItem(
                icon: Icon(Icons.category), title: Text('分类')),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), title: Text('设置')),
          ]),
      body: this._pageList[this._currentIndex],
    );
  }
}

pages/tabs/Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('首页'),
    );
  }
}

pages/tabs/Category.dart

import 'package:flutter/material.dart';

class CategoryPage extends StatelessWidget {
  const CategoryPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('分类')
    );
  }
}

pages/tabs/Setting.dart

import 'package:flutter/cupertino.dart';

class SettingPage extends StatelessWidget {
  const SettingPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('设置'),
    );
  }
}