Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局

野性酷女 2021-11-23 22:31 356阅读 0赞

# 53.购物车\_商品列表UI框架布局 #

# cart\_page.dart #

清空原来写的持久化的代码;

![87548-20190426203521245-650394410.png][]

添加对应的引用，stless生成一个静态的类。建议始终静态的类，防止重复渲染

![87548-20190426203711539-1756139726.png][]

纠正个错误，上图的CartPage单词拼错了，这里改过来防止后面，运行app的时候报错

![87548-20190426205542977-558458691.png][]

build内我们使用scaffold脚手架

![87548-20190426203952360-2067968192.png][]

# 创建Future方法获取购物车持久化数据 #

取数据需要等待时间的，所以之类使用异步async，我们的provide需要context上下文，所以方法内我们要接收一个context对象的参数

![87548-20190426204418551-993032863.png][]

在body里面我们要调用Future的方法就要用到FutureBuilder

![87548-20190426204624705-2001780120.png][]

![87548-20190426212501154-1674987330.png][]

![87548-20190426212515445-859554852.png][]

# 效果展示： #

![87548-20190426212558611-48359135.png][]

修改输出的内容是goodsId不是goodsName

![87548-20190426213457491-490288434.png][]

输出了Name值

![87548-20190426213524980-1621214020.png][]

# 纠正错误： #

provide/cart.dart文件，单词拼错了 修正为goodsName

# ![87548-20190426212101721-330507753.png][] #

在此运行时候需要清空下购物车，重新添加持久化的数据才行。！！！！！切记一定要清空购物车

![87548-20190426213915650-147358020.png][]

![87548-20190426213933332-1246904481.png][]

# 最终代码： #

cart\_page.dart

import 'package:flutter/material.dart';
    import 'package:provide/provide.dart';
    import 'package:flutter_shop/provide/cart.dart';
    
    class CartPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('购物车'),
          ),
          body: FutureBuilder(
            future: _getCartInfo(context),
            builder: (context,snapshot){
              if(snapshot.hasData){
               
                List cartList=Provide.value<CartProvide>(context).cartList;
                //return Text('有数据啊'+cartList.length.toString());
                return ListView.builder(
                  itemCount: cartList.length,
                  itemBuilder: (context,index){
                    return ListTile(
                      title:Text(cartList[index].goodsName)
                    );
                  },
                );
              }else{
                return Text('正在加载');
              }
            },
          ),
        );
      }
    
      Future<String> _getCartInfo(BuildContext context) async{
        await Provide.value<CartProvide>(context).getCartInfo();
        //print('=========================获取购物车内数据');
        return 'end';
      }
    
    }

转载于:https://www.cnblogs.com/wangjunwei/p/10771914.html

[87548-20190426203521245-650394410.png]: /images/20211122/01ce3b575d5146dc8d717d4077807b9d.png
[87548-20190426203711539-1756139726.png]: /images/20211122/6925a0239b3e4e6191f8bd6e0ad3a15b.png
[87548-20190426205542977-558458691.png]: /images/20211122/2eee7bc5a2024f87820a881beb8d1425.png
[87548-20190426203952360-2067968192.png]: /images/20211122/0d24558d7ff34986bd12af8bee196c9d.png
[87548-20190426204418551-993032863.png]: /images/20211122/afff7d2deb2742e39640986f2d08fec4.png
[87548-20190426204624705-2001780120.png]: /images/20211122/efb2ac86725043c3bec3f0c26ae03148.png
[87548-20190426212501154-1674987330.png]: /images/20211122/3bb4a87f66324d9ca855331558497c31.png
[87548-20190426212515445-859554852.png]: /images/20211122/b82a120a71514b089819cf2627ab27ab.png
[87548-20190426212558611-48359135.png]: /images/20211122/7469925bee61471c8190e03aa15869d5.png
[87548-20190426213457491-490288434.png]: /images/20211122/fc9536c123db4aebae08666d742087c7.png
[87548-20190426213524980-1621214020.png]: /images/20211122/114da05857d24a5abb03d1497187b2a2.png
[87548-20190426212101721-330507753.png]: /images/20211122/9be4e94b403a42acb2cfa191023b35ee.png
[87548-20190426213915650-147358020.png]: /images/20211122/c9e5be29fb2f42dc835c70eff9e74869.png
[87548-20190426213933332-1246904481.png]: /images/20211122/3385d3d92a404ec68f0a3cffe411d974.png