Flutter 商城购物车页面代码优化与实现

本文将详细介绍如何使用 Flutter 编写一个功能完善的商城购物车页面，涵盖获取购物车数据、更新商品数量、删除商品、计算总价和结算等功能。代码示例清晰易懂，并提供相应的 API 服务代码，方便开发者快速上手。

1. API 服务代码

首先，我们需要定义 API 服务类，用于处理与服务器之间的网络请求。以下代码示例展示了获取购物车、更新购物车、删除商品、获取地址列表和提交订单等 API 接口的实现。

import 'package:dio/dio.dart';

final String baseUrl = 'http://book.musecloud.tech';

final Dio dioWithCookie = Dio(BaseOptions(
  baseUrl: baseUrl,
  headers: {
    'Cookie':
        'connect.sid=s%3A5_N8d_dL1lqXjFZ9lM0Lk5o9IvCkCgYs.8K3yGZiEjxT4J1%2Fnw1Q%2F1AyL1jLptQKoqb8J8tQd6xQ',
  },
));

// 获取购物车
static Future<List<dynamic>> getShoppingCart() async {
  try {
    Response response = await dioWithCookie.get('$baseUrl/getshoppingcart');
    List<dynamic> jsonData = jsonDecode(response.data);
    return jsonData;
  } catch (e) {
    throw e;
  }
}

// 更新购物车
static Future<List<dynamic>> updateCart(int productId, int quantity) async {
  try {
    Response response = await dioWithCookie.get(
      '$baseUrl/updatecart',
      queryParameters: {
        'productId': productId,
        'quantity': quantity,
      },
    );
    List<dynamic> jsonData = jsonDecode(response.data);
    return jsonData;
  } catch (e) {
    throw e;
  }
}

// 删除购物车项
static Future<double> deleteCart(int productId) async {
  try {
    Response response = await dioWithCookie.get(
      '$baseUrl/deletecart',
      queryParameters: {
        'productId': productId,
      },
    );
    double result = double.parse(response.data);
    return result;
  } catch (e) {
    throw e;
  }
}

// 获取地址列表
static Future<List<Map<String, dynamic>>> getAddresses() async {
  try {
    Response response = await dioWithCookie.get('$baseUrl/getaddresses');
    List<dynamic> jsonData = jsonDecode(response.data);
    return jsonData.cast<Map<String, dynamic>>();
  } catch (e) {
    throw e;
  }
}

// 提交订单
static Future<String> submitOrder(int addressId, String paymentMethod) async {
  try {
    Response response = await dioWithCookie.get(
      '$baseUrl/submitorder',
      queryParameters: {
        'addressId': addressId,
        'paymentMethod': paymentMethod,
      },
    );
    String result = response.data;
    return result;
  } catch (e) {
    throw e;
  }
}

2. 购物车页面代码

接下来，我们编写购物车页面代码，实现以下功能：

获取购物车数据并显示商品列表
更新商品数量
删除商品
计算总价
结算

import 'package:flutter/material.dart';
import '../models/cart_item.dart';
import '../models/product.dart';
import '../services/api_service.dart';

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

class _CartPageState extends State<CartPage> {
  List<CartItem> cartItems = [];
  List<Product> products = [];
  double totalPrice = 0.0;

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

  _fetchData() async {
    try {
      List<dynamic> data = await ApiService.getShoppingCart();
      setState(() {
        cartItems = data[0]
            .map<CartItem>((json) => CartItem.fromJson(json))
            .toList();
        products = data[1]
            .map<Product>((json) => Product.fromJson(json))
            .toList();
        totalPrice = data[2];
      });
    } catch (e) {
      print(e);
    }
  }

  _updateCart(int productId, int quantity) async {
    try {
      List<dynamic> data = await ApiService.updateCart(productId, quantity);
      setState(() {
        totalPrice = data[0];
        int cartIndex = cartItems.indexWhere((item) => item.productId == productId);
        cartItems[cartIndex] = CartItem.fromJson(data[1]);
      });
    } catch (e) {
      print(e);
    }
  }

  _deleteCart(int productId) async {
    try {
      double newTotalPrice = await ApiService.deleteCart(productId);
      setState(() {
        cartItems.removeWhere((item) => item.productId == productId);
        totalPrice = newTotalPrice;
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('购物车'),
      ),
      body: ListView.builder(
        itemCount: cartItems.length,
        itemBuilder: (context, index) {
          CartItem cartItem = cartItems[index];
          Product product = products.firstWhere((p) => p.id == cartItem.productId);
          return ListTile(
            leading: Image.network(product.imageUrl),
            title: Text(product.name),
            subtitle: Text('价格: ${cartItem.price} 数量: ${cartItem.quantity}'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: () {
                    _updateCart(cartItem.productId, cartItem.quantity - 1);
                  },
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    _updateCart(cartItem.productId, cartItem.quantity + 1);
                  },
                ),
                IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    _deleteCart(cartItem.productId);
                  },
                ),
              ],
            ),
          );
        },
      ),
      bottomNavigationBar: _buildBottomBar(),
    );
  }

  Widget _buildBottomBar() {
    return Container(
      height: 50,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text('总价: $totalPrice'),
          ElevatedButton(
            onPressed: () {
              // TODO: Implement checkout process
            },
            child: Text('结算'),
          ),
        ],
      ),
    );
  }
}

3. 代码解析

API 服务类

getShoppingCart() 方法用于获取购物车数据，返回一个包含商品列表、总价等信息的 JSON 数组。
updateCart() 方法用于更新商品数量，参数 productId 和 quantity 分别代表商品 ID 和要更新的数量。
deleteCart() 方法用于删除商品，参数 productId 代表商品 ID。
getAddresses() 方法用于获取用户地址列表。
submitOrder() 方法用于提交订单，参数 addressId 和 paymentMethod 分别代表选择的地址 ID 和支付方式。

购物车页面代码

_fetchData() 方法用于初始化购物车数据，通过调用 ApiService.getShoppingCart() 获取数据并更新页面状态。
_updateCart() 方法用于更新商品数量，调用 ApiService.updateCart() 更新数据并更新页面状态。
_deleteCart() 方法用于删除商品，调用 ApiService.deleteCart() 删除数据并更新页面状态。
_buildBottomBar() 方法用于构建底部栏，显示总价和结算按钮。

4. 总结

本文详细介绍了如何使用 Flutter 编写一个功能完善的商城购物车页面，并提供了相应的 API 服务代码。开发者可以根据自己的实际需求进行修改和扩展，例如添加地址管理功能、支付功能等。

希望本文能够帮助开发者更好地理解 Flutter 的开发流程和技巧，并能够在实际项目中应用。

5. 其他提示

在实际项目中，需要根据具体的业务逻辑和 API 设计进行代码调整。
建议使用状态管理库，例如 Provider 或 BLoC，来管理页面状态。
为了增强用户体验，可以添加动画效果、进度条等。
为了保证代码质量，建议进行单元测试和集成测试。