01-02 Flutter仿京東商城項目 功能分析、底部導航Tab切換以及路由配置、架構搭建：(Flutter仿京東商城項目 首頁布局以及不同終端屏幕適配方案)

Flutter和Dart交流學習群：交流群：452892873

01Flutter仿京東商城項目 功能分析、底部導航Tab切換以及路由配置、架構搭建

02Flutter仿京東商城項目 首頁布局以及不同終端屏幕適配方案

基本架構：

Tabs.dart代碼：

import 'package:flutter/material.dart';

import 'Home.dart';
import 'Cart.dart';
import 'Category.dart';
import 'User.dart';

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

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex=0;
  List _pageList=[
    HomePage(),
    CategoryPage(),
    CartPage(),
    UserPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
        appBar: AppBar(
          title: Text('jdshop'),
        ),
        
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap:(index){
            this.setState((){
              this._currentIndex=index;
            });
          },
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.red,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首頁')),
            BottomNavigationBarItem(icon: Icon(Icons.category), title: Text('分類')),
            BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), title: Text('購物車')),
            BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的'))
          ],
        ),
      ),
    );
  }
}

　　Cart.dart

import 'package:flutter/material.dart';
class CartPage extends StatefulWidget {
  CartPage({Key key}) : super(key: key);

  _CartPageState createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  @override
  Widget build(BuildContext context) {
    return Text('我是購物車組件');
  }
}

　　Category.dart

import 'package:flutter/material.dart';
class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Text('我是分類組件');
  }
}

　　Home.dart

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //輪播圖：
  //flutter run -d all 鏈接多個設備的命令：
  Widget _swiperWidget() {
    List<Map> imgList = [
      {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
      {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
      {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
    ];

    return Container(
      child: AspectRatio(
        aspectRatio: 2 / 1,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(
              imgList[index]['url'],
              fit: BoxFit.fill,
            );
          },
          itemCount: imgList.length,
          pagination: new SwiperPagination(),
          control: new SwiperControl(),
          autoplay: true,
        ),
      ),
    );
  }

  //標題：
  Widget _titleWidget(value) {
    return Container(
      height: ScreenUtil.getInstance().setHeight(46),
      margin: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(20)),
      padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(20)),
      decoration: BoxDecoration(
          border: Border(
              left: BorderSide(
                  color: Colors.red,
                  width: ScreenUtil.getInstance().setWidth(10)))),
      child: Text(value, style: TextStyle(color: Colors.black54)),
    );
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    return ListView(
      children: <Widget>[
        _swiperWidget(),
        SizedBox(height: 10),
        _titleWidget("猜你喜歡"),
        SizedBox(height: 10),
        _titleWidget("熱門推薦")
      ],
    );
  }
}

　　User.dart

import 'package:flutter/material.dart';
class UserPage extends StatefulWidget {
  UserPage({Key key}) : super(key: key);

  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return Text('我是用戶組件');
  }
}

　　router.dart

import 'package:flutter/material.dart';
import '../pages/tabs/Tabs.dart';
import '../pages/Search.dart';
//配置路由的地方：
final routes = {
  '/': (context) => Tabs(),
  '/search': (context) => SearchPage(),
};
//固定寫法：
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;
    }
  }
};

　　main.dart

import 'package:flutter/material.dart';
import 'routes/router.dart';
void main() => runApp(MyApp());

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

  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home:Tabs() ,
      initialRoute: '/',
      onGenerateRoute:onGenerateRoute
    );
  }
}

　　pubspec.yaml新增：

　　

flutter_swiper: ^1.1.6

flutter_screenutil: ^0.5.3