Flutter-防京东商城项目-搭建项目框架-01

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

我当时学习flutter的时候写了一个world文档的资料：或许将来用的上的
代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

运行效果：

今天是2021.08.26开始写放京东商城项目。
本章节主要完成下面内容：
1.构建6个页面：首页，分类，购物车，个人中心，搜索页面。
2.编写tabs底部导航栏，用来页面切换。
3.搭建路由。用于没有页面的切换。

报错

重复运行的时候有时候回出现一个问题。

error: Runner.app/Info.plist does not exist. The Flutter "Thin Binary" build phase must run after "Copy Bundle Resources"

解决办法链接：Flutter-编译出错总结

注意：1

第一次新建项目的时候，用xcode打开项目 运行一下再用Android Studio

首页控制器布局思想

注意：2

如果需要封装代码块需要修改的地方用 #标记

然后com+R 进行全局替换(mac电脑)

注意：3

写完每一个模块之后直接压缩的话项目会很大的，因为包含了SDK，我们可以压缩代码的部分。

0.创建项目

第一步：新建文件夹。

新建pages的文件结构

新建config文件夹，用于放项目的配置信息

新建route文件夹，用于配置页面路由跳转。

第二步: 编写5个控制器

5个控制器的页面内容都是差不多的。主要是类名不一样。
购物车

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) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Cart'),
      ),
      body: Container(
        child: Center(
            child: Text('Cart')
        ),
      ),
    );
  }

}

分类

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) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Category'),
      ),
      body: Container(
        child: Center(
            child: Text('Category')
        ),
      ),
    );
  }

}

首页

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {

  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Container(
        child: Center(
            child: Text('Home')
        ),
      ),
    );
  }

}

个人中心

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) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('User'),
      ),
      body: Container(
        child: Center(
            child: Text('User')
        ),
      ),
    );
  }

}

搜索

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {

  SearchPage({Key key}) : super(key: key);

  _SearchPageState createState() => _SearchPageState();

}

class _SearchPageState extends State<SearchPage> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Search'),
      ),
      body: Container(
        child: Center(
            child: Text('Search')
        ),
      ),
    );
  }

}

步骤三：搭建底部导航页面

import 'package:flutter/material.dart';

import 'package:flutter_app/pages/tabs/Home.dart';
import 'package:flutter_app/pages/tabs/Category.dart';
import 'package:flutter_app/pages/tabs/User.dart';
import 'package:flutter_app/pages/tabs/Cart.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) {
    // TODO: implement build
    return Scaffold(
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap: (int index) {
            setState(() {
              this._currentIndex = index;
            });
          },
          type:BottomNavigationBarType.fixed ,//用于底部tabbar多菜单显示
          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("我的")
            )
          ]),
    );
  }
}

步骤四：搭建路由

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Search.dart';
import 'package:flutter_app/tabs.dart';

final routes = {
  '/':(context,{arguments})=>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;
    }
  }
};

第五步:首页跳转到搜索控制器

刚刚在首页控制器已经写了一个简单的页面了，下面把Text修改为按键

class _homePageState extends State<homePage> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                child: Text('跳转搜索'),
                onPressed: (){
              Navigator.pushNamed(context, '/search');
            })
          ],
        ),
      ),
    );
  }

import 'package:flutter/material.dart';
import 'package:flutter_app/routers/routes.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: onGenerateRoute,
    );
  }
}

下一篇：
Flutter-防京东商城项目-首页图片轮播器和标题栏布局以及不同终端屏幕适配方案-02