以下是购物车页面的代码:

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

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

class _CartPageState extends State { List _carts = []; double _totalPrice = 0;

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

void _loadCart() async { List jsonData = await ApiService.getShoppingCart(); List carts = []; _totalPrice = jsonData.removeLast(); jsonData.forEach((cartJson) { Cart cart = Cart.fromJson(cartJson); carts.add(cart); }); setState(() { _carts = carts; }); }

void _updateCart(int productId, int quantity) async { List jsonData = await ApiService.updateCart(productId: productId, quantity: quantity); _totalPrice = jsonData.removeAt(0); int index = _carts.indexWhere((cart) => cart.product.id == productId); _carts[index] = Cart.fromJson(jsonData[0]); setState(() {}); }

void _deleteCart(int productId) async { double totalPrice = await ApiService.deleteCart(productId: productId); Fluttertoast.showToast( msg: "删除成功", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER, timeInSecForIosWeb: 1, backgroundColor: Colors.grey[600], textColor: Colors.white, fontSize: 16.0); _totalPrice = totalPrice; _carts.removeWhere((cart) => cart.product.id == productId); setState(() {}); }

void _showPayDialog() { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text('请选择支付方式'), content: Column( mainAxisSize: MainAxisSize.min, children: [ Row( children: [ Radio( value: 1, groupValue: 0, onChanged: (int? value) {}, ), Text('支付宝'), ], ), Row( children: [ Radio( value: 2, groupValue: 0, onChanged: (int? value) {}, ), Text('微信'), ], ), ], ), actions: [ FlatButton( child: Text('取消'), onPressed: () { Navigator.of(context).pop(); }, ), FlatButton( child: Text('确认'), onPressed: () { Navigator.of(context).pop(); _submitOrder(); }, ), ], ); }); }

void _submitOrder() async { List jsonData = await ApiService.getAddresses(); if (jsonData.isEmpty) { Fluttertoast.showToast( msg: "请先添加地址", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER, timeInSecForIosWeb: 1, backgroundColor: Colors.grey[600], textColor: Colors.white, fontSize: 16.0); return; } int addressId; for (dynamic json in jsonData) { if (json['isDefault'] == 1) { addressId = json['id']; break; } } if (addressId == null) { addressId = jsonData[0]['id']; } await ApiService.submitOrder( addressId: addressId, paymentMethod: '支付宝'); Fluttertoast.showToast( msg: "下单成功", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER, timeInSecForIosWeb: 1, backgroundColor: Colors.grey[600], textColor: Colors.white, fontSize: 16.0); Navigator.of(context).pop(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('购物车')), body: Column( children: [ Expanded( child: ListView.builder( itemCount: _carts.length, itemBuilder: (BuildContext context, int index) { final cart = _carts[index]; return ListTile( leading: Image.network(cart.product.imageUrl), title: Text(cart.product.name), subtitle: Text('单价: ¥${cart.product.price}'), trailing: Row( mainAxisSize: MainAxisSize.min, children: [ IconButton( icon: Icon(Icons.remove), onPressed: () { if (cart.quantity > 1) { _updateCart(cart.product.id, cart.quantity - 1); } else { _deleteCart(cart.product.id); } }, ), Text('${cart.quantity}'), IconButton( icon: Icon(Icons.add), onPressed: () { _updateCart(cart.product.id, cart.quantity + 1); }, ), ], ), ); }, ), ), Container( padding: EdgeInsets.symmetric(horizontal: 16), height: 50, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text('总价: ¥${_totalPrice.toStringAsFixed(2)}'), RaisedButton( child: Text('结算'), onPressed: _showPayDialog, ), ], ), ), ], ), ); }

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

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

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