Flutter實戰視頻-移動電商-53.購物車_商品列表UI框架佈局

53.購物車_商品列表UI框架佈局

 cart_page.dart

清空原來寫的持久化的代碼;

添加對應的引用，stless生成一個靜態的類。建議始終靜態的類，防止重複渲染

糾正個錯誤，上圖的CartPage單詞拼錯了，這裏改過來防止後面，運行app的時候報錯

 

build內咱們使用scaffold腳手架

建立Future方法獲取購物車持久化數據

取數據須要等待時間的，因此之類使用異步async，咱們的provide須要context上下文，因此方法內咱們要接收一個context對象的參數

 

在body裏面咱們要調用Future的方法就要用到FutureBuilder

 

 

效果展現：

修改輸出的內容是goodsId不是goodsName

 

輸出了Name值

 

 

糾正錯誤：

provide/cart.dart文件，單詞拼錯了 修正爲goodsName

 

在此運行時候須要清空下購物車，從新添加持久化的數據才行。！！！！！切記必定要清空購物車

 

 

最終代碼：

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';
  }

}