flutter之从零搭建小米商城APP（二）底部导航菜单

1.去除debug banner

什么是debug banner，如下图，当然是这个讨厌的东西，碍眼

如下图所示，打开调试之后会出现这个，前四个就不讲，闪电，热加载（hot reload），倒数第三，重新启动项目，倒数第二，停止项目，倒数第一，会打开一个web网页，Dart Devtools

点击debug banner就可以取消了，用过vue devtool 或者react devtool都知道这是调试工具，自己研究吧。

2.底部导航菜单

下面的代码是main.dart的文件

import 'package:flutter/material.dart'; // flutter各种组件的依赖库
import 'package:mi_shop/pages/Home.dart'; // 引入文件的方法，因为我的项目名是mi_shop，自己根据自己的改
import 'package:mi_shop/pages/Category.dart'; //  Category--分类页面
import 'package:mi_shop/pages/Cart.dart'; // Cart--购物车页面
import 'package:mi_shop/pages/Mine.dart';// home对应首页页面 Mine--我的页面

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

class MyApp extends StatelessWidget {
  static const String _title = '小米商城';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title, //
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  var _pageListr = [new Home(), new Category(), new Cart(), new Mine()];
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SafeArea(
          child: _pageListr[_selectedIndex],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('分类'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            title: Text('购物车'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('我的'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Color(0xffff6700), //激活样式
        unselectedItemColor: Color(0xff999999), // 未激活的样式
        showUnselectedLabels: true, // 展示未选择的文本
        type: BottomNavigationBarType.fixed, // 固定底部菜单不移动
        backgroundColor: Color(0xffffffff), // 背景颜色 注：0x代表十六进制 ff代表透明度 后面6位才是颜色
        onTap: _onItemTapped, // 点击事件
      ),
    );
  }
}

上面四个文件对应下方四个菜单