Flutter-防京东商城项目-编写购物车界面模拟数据-25

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

代码文档

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

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

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

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

本章完成后的效果：

说明：关于顶部的导航栏设置，如果全部导航栏统一是这种风格的话可以在tabbar里面的appBar里面设置的，也可以在每个控制器的Scaffold的appBar进行单独设置。

在开始编写之前先把Tabs的导航栏去掉.然后在home,category,cart,user页面分别自定义自己的导航栏，因为cart(购物车)要自定义，其他页面将来可能要自定义。

1.首先先改tabs页面 删除 已有的导航栏。

2.首页跟分类添加代码

注意分类需要导入

import '../../services/screenAdaper.dart';

return Scaffold(
  appBar: AppBar(
    leading: IconButton(
      icon: Icon(Icons.center_focus_weak, size: 28, color: Colors.black87),
      onPressed: null,
    ),
    title: InkWell(
      child: Container(
        height: ScreenAdapter.height(68),
        decoration: BoxDecoration(
            color: Color.fromRGBO(233, 233, 233, 0.8),
            borderRadius: BorderRadius.circular(30)),
        padding: EdgeInsets.only(left: 10),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.search),
            Text("笔记本", style: TextStyle(fontSize: ScreenAdapter.size(28)))
          ],
        ),
      ),
      onTap: () {
        Navigator.pushNamed(context, '/search');
      },
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.message, size: 28, color: Colors.black87),
        onPressed: null,
      )
    ],
  ),
  body:之前旧的代码,
);

3.在用户中心添加下面代码

return Scaffold(
  appBar: AppBar(
    title: Text("用户中心"),
  ),
  body: Center(
    child: Text("${counterProvider.count}",style: TextStyle(
        fontSize: 50
    )),
  ),
);

3.把这个文件之前写的内容删除掉换成下面的内容

导入

import 'package:flutter_app/services/screenAdaper.dart';

删除

替换

@override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenAdapter.width(164),
      decoration:
          BoxDecoration(border: Border.all(width: 1, color: Colors.black12)),
      child: Row(
        children: <Widget>[
          _leftBtn(),
          _centerArea(),
          _rightBtn()
        ],
      ),
    );
  }

  //左侧按钮

  Widget _leftBtn() {
    return InkWell(
      onTap: () {},
      child: Container(
        alignment: Alignment.center,
        width: ScreenAdapter.width(45),
        height: ScreenAdapter.height(45),
        child: Text("-"),
      ),
    );
  }

  //右侧按钮
  Widget _rightBtn() {
    return InkWell(
      onTap: (){


      },
      child: Container(
        alignment: Alignment.center,
        width: ScreenAdapter.width(45),
        height: ScreenAdapter.height(45),
        child: Text("+"),
      ),
    );
  }

//中间
  Widget _centerArea() {
    return Container(
      alignment: Alignment.center,
      width: ScreenAdapter.width(70),
      decoration: BoxDecoration(
          border: Border(
        left: BorderSide(width: 1, color: Colors.black12),
        right: BorderSide(width: 1, color: Colors.black12),
      )),
      height: ScreenAdapter.height(45),
      child: Text("1"),
    );
  }

4.把这个文件之前写的内容删除掉换成下面的内容

导入

import 'package:flutter_app/services/screenAdaper.dart';
import 'package:flutter_app/pages/Cart/CartNum.dart';

删除
替换

@override
Widget build(BuildContext context) {
  return Container(
    height: ScreenAdapter.height(200),
    padding: EdgeInsets.all(5),
    decoration: BoxDecoration(
        border: Border(bottom: BorderSide(width: 1, color: Colors.black12))),
    child: Row(
      children: <Widget>[
        Container(
          width: ScreenAdapter.width(60),
          child: Checkbox(
            value: true,
            onChanged: (val) {},
            activeColor: Colors.pink,
          ),
        ),
        Container(
          width: ScreenAdapter.width(160),
          child: Image.network(
              "https://www.itying.com/images/flutter/list2.jpg",
              fit: BoxFit.cover),
        ),
        Expanded(
          flex: 1,
          child: Container(
            padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text("菲特旋转盖轻量杯不锈钢保温杯学生杯商务杯情侣杯保冷杯子便携水杯LHC4131WB(450Ml)白蓝",
                    maxLines: 2),
                Stack(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text("￥12",style: TextStyle(
                        color: Colors.red
                      )),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: CartNum(),
                    )
                  ],
                )
              ],
            ),
          ),
        )
      ],
    ),
  );
}

5.把这个文件之前写的内容删除掉换成下面的内容

把一两写的状态管理协议注释掉 之前写的只是练习 目前先注释两句话

导入头文件

import 'package:flutter_app/services/screenAdaper.dart';

增加下面的代码

ScreenAdapter.init(context);

5.1然后替换下面的代码

替换之前删除下面的代码

替换

return Scaffold(
  appBar: AppBar(
    title: Text("购物车"),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.launch),
        onPressed: null,
      )
    ],
  ),
  body: Stack(
    children: <Widget>[
      ListView(
        children: <Widget>[CartItem(), CartItem(), CartItem()],
      ),
      Positioned(
        bottom: 0,
        width: ScreenAdapter.width(750),
        height: ScreenAdapter.height(78),
        child: Container(
          decoration: BoxDecoration(
            border: Border(
                top: BorderSide(
                    width: 1,
                    color: Colors.black12
                )
            ),
            color: Colors.white,
          ),
          width: ScreenAdapter.width(750),
          height: ScreenAdapter.height(78),
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.centerLeft,
                child: Row(
                  children: <Widget>[
                    Container(
                      width: ScreenAdapter.width(60),
                      child: Checkbox(
                        value: true,
                        activeColor: Colors.pink,
                        onChanged: (val) {},
                      ),
                    ),
                    Text("全选")
                  ],
                ),
              ),
              Align(
                alignment: Alignment.centerRight,
                child: RaisedButton(
                  child: Text("结算",style: TextStyle(
                      color: Colors.white
                  )),
                  color:Colors.red,

                  onPressed: (){

                  },
                ),
              )
            ],
          ),
        ),
      )
    ],
  ),
);