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

野性酷女 2023-06-28 04:53 44阅读 0赞

### 1.去除debug banner ###

什么是debug banner，如下图，当然是这个讨厌的东西，碍眼  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]  
如下图所示，打开调试之后会出现这个，前四个就不讲，闪电，热加载（hot reload），倒数第三，重新启动项目，倒数第二，停止项目，倒数第一，会打开一个web网页，Dart Devtools  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
点击debug banner就可以取消了，用过vue devtool 或者react devtool都知道这是调试工具，自己研究吧。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]

### 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, // 点击事件
          ),
        );
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]  
**上面四个文件对应下方四个菜单**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107144246617.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200107144324980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200107144557958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200107145046371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020010714502331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70