一、项目结构

二、BottomNavigationBar（iOS中的TabBarController）

• BottomNavigationBarItem（iOS中的TabbarItem）
  比起iOS的确实简单很多

  class _TabsState extends State<Tabs> {
    int _currentIndex = 0;
    List _pageList = [HomePage(), CartPage(), CategoryPage(), UsersPage()];
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("仿京东商城"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
            currentIndex: this._currentIndex,
            onTap: (index) {
              setState(() {
                this._currentIndex = index;
              });
            },
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.red,
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: "首页",
                  ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.category),
                  label: "分类",
                  ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.shopping_cart),
                  label: "消息",
                  ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: "我的",
                  ),
            ]),
      );
    }
  }

三、 配置路由

import 'package:flutter/material.dart';

import '../pages/tabs/tabs.dart';

//配置路由
final routes = {
  '/': (context) => Tabs(),
};

//固定写法

var onGenerateRoute = (RouteSettings settings) {
  //统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};