购物车页面的代码如下:

import 'package:flutter/material.dart'; import 'package:cached_network_image/cached_network_image.dart'; import '../models/cart.dart'; import '../services/api_service.dart';

class CartPage extends StatefulWidget { @override _CartPageState createState() => _CartPageState(); }

class _CartPageState extends State { List _carts = [];

@override void initState() { super.initState(); _loadCarts(); }

Future _loadCarts() async { List carts = await ApiService.getCartList(); setState(() { _carts = carts; }); }

Future _updateCart(int productId, int quantity) async { dynamic data = await ApiService.updateCart(productId, quantity); setState(() { if (data is List) { _carts = _carts.map((cart) { if (cart.productId == productId) { return Cart.fromJson(data[1]); } else { return cart; } }).toList(); } }); }

Future _deleteCart(int productId) async { dynamic data = await ApiService.deleteCart(productId); setState(() { if (data is double) { _carts.removeWhere((cart) => cart.productId == productId); } }); }

TextStyle _textStyle = TextStyle(fontSize: 16);

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('购物车'), centerTitle: true, ), body: _carts.isNotEmpty ? Column( children: [ Expanded( child: ListView.builder( itemCount: _carts.length, itemBuilder: (BuildContext context, int index) { final cart = _carts[index]; return Card( margin: EdgeInsets.all(8), child: Row( children: [ Expanded( child: CachedNetworkImage( imageUrl: cart.productImageUrl, fit: BoxFit.cover, errorWidget: (context, url, error) => Icon(Icons.error), ), ), Expanded( flex: 2, child: Padding( padding: EdgeInsets.all(8), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( cart.productName, style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, ), ), SizedBox(height: 4), Text( '价格: ¥${cart.price.toStringAsFixed(2)}', style: _textStyle, ), SizedBox(height: 4), Text( '数量: ${cart.quantity}', style: _textStyle, ), ], ), ), ), Expanded( child: IconButton( icon: Icon(Icons.add), onPressed: () { _updateCart(cart.productId, 1); }, ), ), Expanded( child: IconButton( icon: Icon(Icons.remove), onPressed: () { _updateCart(cart.productId, -1); }, ), ), Expanded( child: IconButton( icon: Icon(Icons.delete), onPressed: () { _deleteCart(cart.productId); }, ), ), ], ), ); }, ), ), SizedBox( height: 50, child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text( '总价:', style: _textStyle, ), Text( '¥${_carts.fold(0, (acc, cart) => acc + cart.price * cart.quantity).toStringAsFixed(2)}', style: textStyle, ), RaisedButton( child: Text('结算'), onPressed: () { showDialog( context: context, builder: () => AlertDialog( title: Text('付款'), content: Column( mainAxisSize: MainAxisSize.min, children: [ Text('选择地址'), SizedBox(height: 8), FutureBuilder( future: ApiService.getAddressList(), builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasData) { return Container( height: 200, child: ListView.builder( itemCount: snapshot.data.length, itemBuilder: (BuildContext context, int index) { final address = snapshot.data[index]; return ListTile( title: Text( '${address.provience}${address.city}${address.district}${address.addressLine}', ), subtitle: Text( address.isDefault == 1 ? '默认地址' : '', ), trailing: Icon(Icons .keyboard_arrow_right), ); }, ), ); } else { return CircularProgressIndicator(); } }, ), SizedBox(height: 8), Text('新增地址'), SizedBox(height: 8), TextFormField( decoration: InputDecoration( hintText: '收货人姓名', ), ), SizedBox(height: 8), TextFormField( decoration: InputDecoration( hintText: '收货人电话', ), ), SizedBox(height: 8), TextFormField( decoration: InputDecoration( hintText: '省份', ), ), SizedBox(height: 8), TextFormField( decoration: InputDecoration( hintText: '城市', ), ), SizedBox(height: 8), TextFormField( decoration: InputDecoration( hintText: '区县', ), ), SizedBox(height: 8), TextFormField( decoration: InputDecoration( hintText: '详细地址', ), ), SizedBox(height: 8), Text('选择支付方式'), SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Column( children: [ Icon(Icons.alipay), SizedBox(height: 4), Text('支付宝'), ], ), Column( children: [ Icon(Icons.payment), SizedBox(height: 4), Text('微信'), ], ), ], ), SizedBox(height: 8), RaisedButton( child: Text('确认付款'), onPressed: () {}, ), ], ), ), ); }, ), ], ), ), ], ) : Center( child: Text('购物车为空'), ), )

我现在用flutter写了一个商城我需要你按照下面的要求给我对应的文件和代码所有的网络请求都要写在apiservice里面我的网络请求这部分需要一个model去解析我现在需要你给我写一个购物车页面要好看的ui还有解析数据的model和api_service的代码购物车需要请求网址是httpbookmusecloudtechgetshoppingcart返回的是一个json数组数组的第一个是每个购物

原文地址: https://www.cveoy.top/t/topic/fzdB 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录