--- highlight: a11y-dark --- 在我个人认为学习一门新的语言(快速高效学习) 一定是通过实践，最好的就是做项目，这里我会简单写一个京东的Demo。第一天 [搭建项目框架，实现首页的功能](https://juejin.cn/editor/drafts/7043351582573854727)：https://juejin.cn/editor/drafts/7043351582573854727。第二天实现 [分类和商品列表页面](https://juejin.cn/post/7044716539550892068)： https://juejin.cn/post/7044716539550892068。第三天实现 [商品详情页功能](https://juejin.cn/editor/drafts/7045849478170935332)：https://juejin.cn/editor/drafts/7045849478170935332 Flutter-[混合工程的持续集成实践](https://juejin.cn/post/7042099001679675422)： https://juejin.cn/post/7042099001679675422 前面实现了首页、分类页面、商品列表页和商品详情页的功能，这篇文章实现购物车页面的功能。 ## 用到的知识点 ### 1. shared_preferences 实现本地数据存储 `shared_preferences` 是 Flutter 提供的 key-value 存储插件，能够将数据持久化到磁盘中，支持 Android 和 iOS，在 iOS 中是基于 `NSUserDefaults`，在 Android 中基于`SharedPreferences`。在项目的 `pubspec.yaml` 文件中添加依赖：`shared_preferences: ^2.0.11`，然后执行 `pub get`， shared_preferences 支持的数据类型有 **int、double、bool、string、stringList**。在`services`文件里面定义一个`storage.dart`，在里面封装常用的功能： ```dart import 'package:shared_preferences/shared_preferences.dart'; class Storage { //设置值 static Future setString(key, value) async { SharedPreferences sp = await SharedPreferences.getInstance(); var result = sp.setString(key, value); } //获取值 static Future getString(key) async{ SharedPreferences sp = await SharedPreferences.getInstance(); var result = sp.getString(key); return result; } //删除值 static Future remove(key) async { SharedPreferences sp = await SharedPreferences.getInstance(); sp.remove(key); } //清理值 static Future clear() async { SharedPreferences sp = await SharedPreferences.getInstance(); sp.clear(); } } ``` 我这里是用了String类型举例，封装了一个类专门管理。在之前的文章中页讲到数据存储的两种方式：https://juejin.cn/post/7040986659533357087 ### 2. JSON 转 Model 在日常开发中`JSON的序列化与反序列化`是一个常见的操作，如果都是我们手动去解析JSON数据，是很麻烦的。如果能够自动转化就省去了很多事情。 #### 工具实现在iOS上面我就找到了一个工具可以自动转换 json 数据：https://juejin.cn/post/7026898009900187679 。那在Flutter 中也找到了转换的工具：https://app.quicktype.io ，相对来讲也是比较好用的。 ![截屏2021-12-28 下午9.54.10.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fcc7cb0a0fc4b469875dede9ed36eab~tplv-k3u1fbpfcp-watermark.image?) 这样就可以实现转化。由于Flutter禁用运行时反射，才导致没有像iOS成熟的库完成解析，比如 `MJExtension`、 `YYModel`，这里介绍一个相对成熟的库 json_serializable 实现转化。 #### json_serializable 实现在项目的 `pubspec.yaml` 文件中添加依赖： ``` json_serializable: ^6.1.3 build_runner: ^2.1.7 json_annotation: ^4.4.0 ``` 然后执行 `pub get`。要想使用转化，首先要先用工具生成模型类，工具地址：https://caijinglong.github.io/json2dart/index_ch.html ![截屏2021-12-28 下午9.31.39.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc198b20095f4fd0b1a880c623c448e9~tplv-k3u1fbpfcp-watermark.image?) 在项目里面创建模型类，把工具转换的代码拷贝到这个模型类里面 ```dart import 'package:json_annotation/json_annotation.dart'; part 'person.g.dart'; List getpersonList(List list){ List result = []; list.forEach((item){ result.add(person.fromJson(item)); }); return result; } @JsonSerializable() class person extends Object with _$personSerializerMixin{ @JsonKey(name: 'name') String name; @JsonKey(name: 'age') String age; @JsonKey(name: 'tele') String tele; person(this.name,this.age,this.tele,); factory person.fromJson(Map srcJson) => _$personFromJson(srcJson); } ``` 接下来在终端执行`flutter packages pub run build_runner watch`，就会在项目里面生成`person.g.dart`文件，这个里面就是转换好的代码。 ![截屏2021-12-28 下午9.38.57.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1a3261dc20445499dfd5c279718fd27~tplv-k3u1fbpfcp-watermark.image?) 也可以执行 `flutter packages pub run build_runner build`生成 `person.g.dart`文件，区别在于上面是持续生成，下面这个是一次性生成。注意上面工具使用时，会按着list里面第一个map里面的数据进行解析，假如数组里面其他map字段比较多，就会存在漏字段的情况，这个还需要注意检查下。整体使用下来也不是很方便，还不如用工具直接生成简单：https://app.quicktype.io 。 #### 插件 JsonToDart 实现 https://zhuanlan.zhihu.com/p/163330265 这个插件也可以实现转换在 Android Studio 中安装 `JsonToDart` 插件，打开 Preferences（Mac）或者 Setting（Window），选择 Plugins，搜索 `JsonToDart` ![截屏2021-12-28 下午10.08.59.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75dceb00152a40d297459fbd6f6f3517~tplv-k3u1fbpfcp-watermark.image?) 点击 Install 安装，安装完成后重启。这个时候选定目录，点击右键，选择 `New->Json to Dart`，或者使用快捷键 ``` Windows：ALT + Shift + D Mac：Option + Shift + D ``` ![截屏2021-12-28 下午10.11.24.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/920824ece1864dd5a2870b3f6954bbcc~tplv-k3u1fbpfcp-watermark.image?) 选中 `Json To Dart` 后，弹出页面输入要转换的json数据 ![截屏2021-12-28 下午10.10.35.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7231f91e630447c5a98609fb5c08bb69~tplv-k3u1fbpfcp-watermark.image?) 点击完成，就会生成对应的模型文件了 ![截屏2021-12-28 下午10.10.55.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76cb9be9c0784d27a12e7c9d983e94ba~tplv-k3u1fbpfcp-watermark.image?) 这个是三个json转model方案里面`最简单`的了。上篇文章实现了五种JSON转Model的方案：https://juejin.cn/post/7047011637248655396 ### 3. 在不同分辨率的手机上查看UI效果 Flutter 开发最大的优势就是其跨平台，当开发完成时，想在不同分辨率的手机查看其效果，如果跑每个机型去看效果还是比较麻烦的。这个包 `device_preview` 可以实现查看不同分辨率手机上的UI效果。配置 `device_preview: ^1.0.0`，然后执行 `pub get`。在 main.dart里面使用 ```dart import 'package:device_preview/device_preview.dart'; void main() => runApp( DevicePreview( enabled: !kReleaseMode,//在非release环境下使用 builder: (context) => MyApp(), // Wrap your app ), ); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( useInheritedMediaQuery: true, locale: DevicePreview.locale(context), builder: DevicePreview.appBuilder, theme: ThemeData.light(), darkTheme: ThemeData.dark(), home: const HomePage(), ); } } ``` **这个包可以实现下列功能：** - 更改设备方向 - 动态系统配置：语言，暗模式，文本缩放比例 - 可自由调整分辨率和安全区域的设备 - 保持应用程序状态 - 截图 ![Simulator Screen Shot - iPhone 12 Pro - 2021-12-29 at 18.24.12.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d9f300ffe6c4c59938d55f6224829a2~tplv-k3u1fbpfcp-watermark.image?) ### 4. Provider 状态管理 #### 什么是Provider 状态管理？当我们想在多个页面（组件/Widget）之间共享状态（数据），或者一个页面（组件/Widget）中的多个子组件之间共享状态（数据），这个时候我们就可以用 Flutter 中的状态管理来管理统一的状态（数据），实现不同组件直接的传值和数据共享。`provider` 是 Flutter `官方团队`推出的状态管理模式。 #### 具体的使用： - 配置`provider: ^6.0.1`， - 新建一个文件夹叫 provider，在 provider 文件夹里面放我们对于的状态管理类 - 在 provider 里面新建 cart.dart - cart.dart 里面新建一个类继承 `ChangeNotifier` 代码如下，这里主要是处理购物车中的数据 ```dart class Cart with ChangeNotifier { List _cartList = [];//购物车数据 bool _isCheckAll = false;//全选 double _allPrice = 0;//总价 List get cartList => _cartList; bool get isCheckAll => _isCheckAll; double get allPrice => _allPrice; Cart(){ this.init(); } //初始化的时候获取购物车数据 init() async { String? cartList = await Storage.getString(('cartList')); if(cartList != null){ List cartListData = json.decode(cartList); _cartList = cartListData; } else { _cartList = []; } //获取全选的状态 _isCheckAll = this.isCheckAll; //计算总价 computeAllPrice(); notifyListeners(); } updateCartList() { this.init(); } itemCountChange() { Storage.setString('cartList', json.encode(_cartList)); //计算总价 computeAllPrice(); notifyListeners(); } //全选反选 checkAll(value) { for (var i = 0; i < _cartList.length; i++) { _cartList[i]['checked'] = value; } _isCheckAll = value; //计算总价 computeAllPrice(); Storage.setString('cartList', json.encode(_cartList)); notifyListeners(); } //判断是否全选 bool isCheckedAll() { if (_cartList.length > 0) { for (var i = 0; i < cartList.length; i++) { if (_cartList[i]['checked'] == false) { return false; } } return true; } return false; } //监听每一项的选中事件 itemChage() { if (isCheckAll == true) { _isCheckAll = true; } else { _isCheckAll = false; } //计算总价 computeAllPrice(); Storage.setString('cartList', json.encode(_cartList)); notifyListeners(); } //计算总价 computeAllPrice() { double tempAllPrice = 0; for (var i = 0; i < _cartList.length; i++) { if (_cartList[i]['checked'] == true) { tempAllPrice += _cartList[i]['price'] * _cartList[i]['count']; } } _allPrice = tempAllPrice; notifyListeners(); } //删除数据 removeItem() { List tempList=[]; for (var i = 0; i < _cartList.length; i++) { if (_cartList[i]['checked'] == false) { tempList.add(_cartList[i]); } } _cartList=tempList; //计算总价 computeAllPrice(); Storage.setString('cartList', json.encode(_cartList)); notifyListeners(); } } ``` 最后别忘记在`main.dart`中的`MultiProvider`添加上这个文件 ```dart providers:[ ChangeNotifierProvider(create: (_) => CheckOut()), ChangeNotifierProvider(create: (_) => Cart()), ], ``` ## 实现效果 ![Simulator Screen Shot - iPhone 12 Pro - 2021-12-28 at 20.07.24.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9551f408cd804672ac84bf04b502a322~tplv-k3u1fbpfcp-watermark.image?) ### 具体实现代码 #### 界面框架代码 ```dart class CartPage extends StatefulWidget { CartPage({Key? key}) : super(key: key); _CartPageState createState() => _CartPageState(); } class _CartPageState extends State { bool _isEdit = false; var checkOutProvider; @override void initState() { super.initState(); } //去结算 doCheckOut() async { //1、获取购物车选中的数据 List checkOutData = await CartServices.getCheckOutData(); //2、保存购物车选中的数据 this.checkOutProvider.changeCheckOutListData(checkOutData); //3、购物车有没有选中的数据 if (checkOutData.length > 0) { Navigator.pushNamed(context, '/checkOut'); } else { Fluttertoast.showToast( msg: '购物车没有选中的数据', toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER, ); } } @override Widget build(BuildContext context) { var cartProvider = Provider.of(context); checkOutProvider = Provider.of(context); return Scaffold( appBar: AppBar( title: Text('购物车'), actions: [ IconButton(onPressed: (){ }, icon: Icon(Icons.launch)) ], ), body: cartProvider.cartList.length > 0 ? Stack( children: [ //列表 ListView( children: [ Column( children: [ Column( children: cartProvider.cartList.map((value){ //返回生成每个Item return CartItem(value); }).toList(), ), SizedBox(height: ScreenAdapter.height(100)) ], ) ], ), //底部的全选和结算按钮 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: [ Align( alignment: Alignment.centerLeft, child: Row( children: [ Container( width: ScreenAdapter.width(60), child: Checkbox( value: false, activeColor: Colors.pink, onChanged: (v){ }, ), ), Text('全选'), ], ), ), Align( alignment: Alignment.centerRight, child: Container( margin: EdgeInsets.only(right: 10), child: ElevatedButton( child: Text('结算', style: TextStyle(color: Colors.white),), style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.red), ), onPressed: (){ doCheckOut(); }, ), ), ) ], ), ) ), ], ) : Center( child: Text("购物车空空的..."), ), ); } } ``` #### 每个Item的实现代码 ![截屏2021-12-29 下午5.46.29.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33085ca6d3b249f081007d5d9440b297~tplv-k3u1fbpfcp-watermark.image?) 单独创建一个cart文件夹，在里面放在主页面抽离的代码 ```dart class CartItem extends StatefulWidget { Map _itemData; CartItem(this._itemData,{Key? key}) : super(key: key); _CartItemState createState() => _CartItemState(); } class _CartItemState extends State { //从本地存储的数据里面读取的 late Map _itemData; @override Widget build(BuildContext context) { //注意：给属性赋值 this._itemData=widget._itemData; //通过Provider实现了页面和组件间的数据共享 var cartProvider = Provider.of(context); return Container( height: ScreenAdapter.height(220), padding: EdgeInsets.all(5), decoration: BoxDecoration( border: Border(bottom: BorderSide(width: 1, color: Colors.black12))), child: Row( children: [ Container( width: ScreenAdapter.width(60), child: Checkbox( value: _itemData["checked"], onChanged: (val) { _itemData["checked"]=!_itemData["checked"]; //更新数据 cartProvider.itemChage(); }, activeColor: Colors.pink, ), ), Container( width: ScreenAdapter.width(160), child: Image.network( "${_itemData["pic"]}", fit: BoxFit.cover), ), Expanded( flex: 1, child: Container( padding: EdgeInsets.fromLTRB(10, 10, 10, 5), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("${_itemData["title"]}", maxLines: 2), Text("${_itemData["selectedAttr"]}", maxLines: 2), Stack( children: [ Align( alignment: Alignment.centerLeft, child: Text("￥${_itemData["price"]}",style: TextStyle( color: Colors.red )), ), Align( alignment: Alignment.centerRight, //实现增加/减少物品件数 child: CartNum(_itemData), ) ], ) ], ), ), ) ], ), ); } } ``` #### 每件商品的数量加/减组件代码 ![截屏2021-12-29 下午5.46.45.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3766bd0950ff43c5a10f61417481774d~tplv-k3u1fbpfcp-watermark.image?) ```dart class CartNum extends StatefulWidget { Map _itemData; CartNum(this._itemData,{Key? key}) : super(key: key); _CartNumState createState() => _CartNumState(); } class _CartNumState extends State { late Map _itemData; var cartProvider; @override Widget build(BuildContext context) { //注意 _itemData=widget._itemData; cartProvider = Provider.of(context); return Container( width: ScreenAdapter.width(168), decoration: BoxDecoration(border: Border.all(width: ScreenAdapter.width(2), color: Colors.black12)), child: Row( children: [ _leftBtn(), _centerArea(), _rightBtn() ], ), ); } //左侧按钮 Widget _leftBtn() { return InkWell( onTap: () { if(_itemData["count"]>1){ _itemData["count"]--; cartProvider.itemCountChange(); } }, child: Container( alignment: Alignment.center, width: ScreenAdapter.width(45), height: ScreenAdapter.height(45), child: Text("-"), ), ); } //右侧按钮 Widget _rightBtn() { return InkWell( onTap: (){ _itemData["count"]++; cartProvider.itemCountChange(); }, 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: ScreenAdapter.width(2), color: Colors.black12), right: BorderSide(width: ScreenAdapter.width(2), color: Colors.black12), )), height: ScreenAdapter.height(45), child: Text("${_itemData["count"]}"), ); } } ``` #### provider 代码通过使用provider实现了数据共享，创建了两个文件 **cart.dart** 和 **check_out.dart** ```dart class Cart with ChangeNotifier { List _cartList = [];//购物车数据 bool _isCheckAll = false;//全选 double _allPrice = 0;//总价 List get cartList => _cartList; bool get isCheckAll => _isCheckAll; double get allPrice => _allPrice; Cart(){ this.init(); } //初始化的时候获取购物车数据 init() async { String? cartList = await Storage.getString(('cartList')); if(cartList != null){ List cartListData = json.decode(cartList); _cartList = cartListData; } else { _cartList = []; } //获取全选的状态 _isCheckAll = this.isCheckAll; //计算总价 computeAllPrice(); notifyListeners(); } updateCartList() { this.init(); } itemCountChange() { Storage.setString('cartList', json.encode(_cartList)); //计算总价 computeAllPrice(); notifyListeners(); } //全选反选 checkAll(value) { for (var i = 0; i < _cartList.length; i++) { _cartList[i]['checked'] = value; } _isCheckAll = value; //计算总价 computeAllPrice(); Storage.setString('cartList', json.encode(_cartList)); notifyListeners(); } //判断是否全选 bool isCheckedAll() { if (_cartList.length > 0) { for (var i = 0; i < cartList.length; i++) { if (_cartList[i]['checked'] == false) { return false; } } return true; } return false; } //监听每一项的选中事件 itemChage() { if (isCheckAll == true) { _isCheckAll = true; } else { _isCheckAll = false; } //计算总价 computeAllPrice(); Storage.setString('cartList', json.encode(_cartList)); notifyListeners(); } //计算总价 computeAllPrice() { double tempAllPrice = 0; for (var i = 0; i < _cartList.length; i++) { if (_cartList[i]['checked'] == true) { tempAllPrice += _cartList[i]['price'] * _cartList[i]['count']; } } _allPrice = tempAllPrice; notifyListeners(); } //删除数据 removeItem() { List tempList=[]; for (var i = 0; i < _cartList.length; i++) { if (_cartList[i]['checked'] == false) { tempList.add(_cartList[i]); } } _cartList=tempList; //计算总价 computeAllPrice(); Storage.setString('cartList', json.encode(_cartList)); notifyListeners(); } } ``` ```dart class CheckOut with ChangeNotifier { List _checkOutListData = []; //购物车数据 List get checkOutListData => _checkOutListData; changeCheckOutListData(data){ _checkOutListData=data; notifyListeners(); } } ``` 以上就是购物车页面的实现代码。