Flutter商城购物车页面开发：UI设计、网络请求和数据解析

本文将带你一步步开发一个功能完备的Flutter商城购物车页面，包含UI设计、网络请求、数据解析、商品添加、更新和删除等功能。

1. UI设计

购物车页面通常包含以下元素：

商品列表：显示购物车中添加的商品，包含商品图片、名称、数量、价格等信息。
总价：显示购物车中所有商品的总价。
结算按钮：点击结算按钮，进入结算页面，选择支付方式、收货地址等信息，完成订单支付。

2. 网络请求

购物车页面需要与服务器进行交互，完成商品数据获取、添加、更新和删除等操作。我们可以使用ApiService类来封装网络请求逻辑，方便代码管理和维护。

2.1 ApiService类

import 'dart:convert';
import 'package:dio/dio.dart';
import '../models/product.dart';

class ApiService {
  static final String baseUrl = "http://book.musecloud.tech";
  static Dio _dio = Dio();  // 全局Dio实例
  static Dio dioWithCookie = Dio();  //登录

  static Future<bool> login(String email, String password) async {
    print(email);
    print(password);
    //拦截302跳转并获取cookie
    Response response = await _dio.get(
      '$baseUrl/user/login',
      queryParameters: {
        'name': email,
        'password': password,
      },
      options: Options(
        followRedirects: false,
        validateStatus: (status) {
          print(status);
          return status! < 500;
        },
      ),
    );
    //如果response.data包含特色书籍字符串，则登录成功
    if (response.statusCode == 302) {
      //保存cookie
      String? cookie = response.headers['set-cookie']?[0];
      print(response.headers['set-cookie']);
      //JSESSIONID=255559E896E3DDA5480CE00C6D01683D; Path=/; HttpOnly
      //只要JESSIONID=255559E896E3DDA5480CE00C6D01683D
      cookie = cookie!.substring(0, cookie.indexOf(';'));
      //将cookie保存到全局Dio实例中
      dioWithCookie.options.headers['cookie'] = cookie;
      return true;
    } else {
      return false;
    }
  }
  // 获取产品详情
  static Future<Product> getProductDetail(int productId) async {
    try {
      Response response = await _dio.get(
        '$baseUrl/getproductdetail',
        queryParameters: {
          'productId': productId,
        },
      );
      dynamic jsonData = jsonDecode(response.data);
      Product product = Product.fromJson(jsonData);
      return product;
    } catch (e) {
      throw e;
    }
  }
  // 获取产品列表
  static Future<List<Product>> getProductList({
    required int page,
    required int limit,
  }) async {
    try {
      Response response = await _dio.get(
        '$baseUrl/getproductlist',
        queryParameters: {
          'page': page,
          'limit': limit,
          'category': '',
          'keyword': '',
          'minprice': '',
          'maxprice': '',
          'origin': '',
          'brand': '',
          'supplier': '',
          'isActive': '',
          'isDeleted': '',
        },
      );
      List<dynamic> jsonData = jsonDecode(response.data);
      List<Product> products =
          jsonData.map((json) => Product.fromJson(json)).toList();
      return products;
    } catch (e) {
      throw e;
    }
  }
  // 添加到购物车
  static Future<String> addToCart(int productId, int quantity) async {
    try {
      Response response = await dioWithCookie.get(
        '$baseUrl/addcart',
        queryParameters: {
          'productId': productId,
          'quantity': quantity,
        },
      );
      String result = response.data;
      return result;
    } catch (e) {
      throw e;
    }
  }
}

2.2 获取购物车数据

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

2.3 更新购物车商品

// 更新购物车商品
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> cartData = jsonDecode(response.data);
    return cartData;
  } catch (e) {
    throw e;
  }
}

2.4 删除购物车商品

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

3. 数据解析

从服务器获取到的数据通常是JSON格式，需要将其解析成Dart对象，方便在页面中使用。

3.1 CartItemModel类

class CartItemModel {
  final int cartid;
  final double price;
  final int productid;
  final int quantity;
  final int userid;
  CartItemModel({
    required this.cartid,
    required this.price,
    required this.productid,
    required this.quantity,
    required this.userid,
  });
  factory CartItemModel.fromJson(Map<String, dynamic> json) {
    return CartItemModel(
      cartid: json['cartid'],
      price: json['price'].toDouble(),
      productid: json['productid'],
      quantity: json['quantity'],
      userid: json['userid'],
    );
  }
}

3.2 ProductModel类

class ProductModel {
  final String brand;
  final int categoryId;
  final int createdAt;
  final String description;
  final int id;
  final String imageUrl;
  final int isActive;
  final int isDeleted;
  final int isFeatured;
  final String name;
  final String origin;
  final double price;
  final int stock;
  final String supplier;
  final int updatedAt;
  final double weight;
  ProductModel({
    required this.brand,
    required this.categoryId,
    required this.createdAt,
    required this.description,
    required this.id,
    required this.imageUrl,
    required this.isActive,
    required this.isDeleted,
    required this.isFeatured,
    required this.name,
    required this.origin,
    required this.price,
    required this.stock,
    required this.supplier,
    required this.updatedAt,
    required this.weight,
  });
  factory ProductModel.fromJson(Map<String, dynamic> json) {
    return ProductModel(
      brand: json['brand'],
      categoryId: json['categoryId'],
      createdAt: json['createdAt'],
      description: json['description'],
      id: json['id'],
      imageUrl: json['imageUrl'],
      isActive: json['isActive'],
      isDeleted: json['isDeleted'],
      isFeatured: json['isFeatured'],
      name: json['name'],
      origin: json['origin'],
      price: json['price'].toDouble(),
      stock: json['stock'],
      supplier: json['supplier'],
      updatedAt: json['updatedAt'],
      weight: json['weight'].toDouble(),
    );
  }
}

4. 购物车页面代码

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter_app/api_service.dart';
import 'package:flutter_app/models/cart_item_model.dart';
import 'package:flutter_app/models/product_model.dart';

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

class _CartPageState extends State<CartPage> {
  List<CartItemModel> _cartItems = [];
  double _totalPrice = 0;

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

  void _getCartData() async {
    try {
      List<dynamic> cartData = await ApiService.getShoppingCartData();
      _cartItems = cartData[0]
          .map((item) => CartItemModel.fromJson(item))
          .toList();
      _totalPrice = cartData[2].toDouble();
      setState(() {});
    } catch (e) {
      print('获取购物车数据失败: $e');
    }
  }

  void _updateCart(int productId, int quantity) async {
    try {
      List<dynamic> cartData = await ApiService.updateCart(productId, quantity);
      _totalPrice = cartData[0].toDouble();
      _cartItems = cartData[1]
          .map((item) => CartItemModel.fromJson(item))
          .toList();
      setState(() {});
    } catch (e) {
      print('更新购物车商品失败: $e');
    }
  }

  void _deleteCart(int productId) async {
    try {
      double totalPrice = await ApiService.deleteCart(productId);
      _totalPrice = totalPrice;
      _cartItems.removeWhere((item) => item.productid == productId);
      setState(() {});
    } catch (e) {
      print('删除购物车商品失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('购物车'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _cartItems.length,
              itemBuilder: (BuildContext context, int index) {
                final item = _cartItems[index];
                return FutureBuilder<ProductModel>( // 获取商品详情
                  future: ApiService.getProductDetail(item.productid),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      final product = snapshot.data!;
                      return ListTile(
                        leading: Image.network(product.imageUrl),
                        title: Text(product.name),
                        subtitle: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('数量：${item.quantity}'),
                            Text('价格：¥${product.price}'),
                          ],
                        ),
                        trailing: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                              onPressed: () {
                                _updateCart(
                                    item.productid, item.quantity + 1);
                              },
                              icon: Icon(Icons.add),
                            ),
                            IconButton(
                              onPressed: () {
                                if (item.quantity > 1) {
                                  _updateCart(
                                      item.productid, item.quantity - 1);
                                }
                              },
                              icon: Icon(Icons.remove),
                            ),
                            IconButton(
                              onPressed: () {
                                _deleteCart(item.productid);
                              },
                              icon: Icon(Icons.delete),
                            ),
                          ],
                        ),
                      );
                    } else if (snapshot.hasError) {
                      return Text('获取商品详情失败');
                    } else {
                      return CircularProgressIndicator();
                    }
                  },
                );
              },
            ),
          ),
          Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text('总价：¥$_totalPrice'),
                SizedBox(height: 16.0),
                ElevatedButton(
                  onPressed: () {
                    // TODO: 弹出付款框
                  },
                  child: Text('结算'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

5. 总结

本文详细介绍了如何使用Flutter开发一个功能完备的购物车页面，涵盖了UI设计、网络请求、数据解析等关键步骤。希望本文能帮助你更好地理解Flutter的开发流程，并为你的应用开发提供参考。