flutter-仿京东商城01

一、项目结构

image.png

二、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;
    }
  }
};