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

1.去除debug banner

什么是debug banner,如下图,当然是这个讨厌的东西,碍眼
flutter之从零搭建小米商城APP(二)底部导航菜单_第1张图片
如下图所示,打开调试之后会出现这个,前四个就不讲,闪电,热加载(hot reload),倒数第三,重新启动项目,倒数第二,停止项目,倒数第一,会打开一个web网页,Dart Devtools
flutter之从零搭建小米商城APP(二)底部导航菜单_第2张图片
点击debug banner就可以取消了,用过vue devtool 或者react devtool都知道这是调试工具,自己研究吧。
flutter之从零搭建小米商城APP(二)底部导航菜单_第3张图片

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

flutter之从零搭建小米商城APP(二)底部导航菜单_第4张图片
上面四个文件对应下方四个菜单

flutter之从零搭建小米商城APP(二)底部导航菜单_第5张图片

你可能感兴趣的:(flutter)