Flutter商城开发：实现悬浮购物车按钮和动画展开功能

本文将指导你如何在Flutter商城应用中实现一个悬浮的购物车按钮，并通过长按动画展开显示购物车内的商品，以及添加结算功能。

1. 添加悬浮购物车按钮

在商品详情页中，添加一个FloatingActionButton组件来实现悬浮按钮：

FloatingActionButton(
  onPressed: () {
    // TODO: 添加商品到购物车
  },
  child: Icon(Icons.add_shopping_cart),
),

2. 实现购物车动画展开

在购物车页面中，使用AnimatedContainer和GestureDetector来实现动画展开效果：

class ShoppingCart extends StatefulWidget {
  @override
  _ShoppingCartState createState() => _ShoppingCartState();
}

class _ShoppingCartState extends State<ShoppingCart> {
  bool _showCart = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('购物车'),
      ),
      body: GestureDetector(
        onTap: () {
          setState(() {
            _showCart = false;
          });
        },
        child: Stack(
          children: [
            // TODO: 显示购物车所有商品信息
            AnimatedContainer(
              duration: Duration(milliseconds: 500),
              height: _showCart ? MediaQuery.of(context).size.height * 0.8 : 0,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3),
                  ),
                ],
              ),
            ),
            Positioned(
              bottom: 20,
              right: 20,
              child: GestureDetector(
                onLongPress: () {
                  setState(() {
                    _showCart = true;
                  });
                },
                child: FloatingActionButton(
                  onPressed: () {
                    // TODO: 跳转到结算页面
                  },
                  child: Icon(Icons.shopping_cart),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 发送添加购物车请求

在添加商品到购物车按钮的onPressed事件中，使用Dio发送网络请求：

onPressed: () async {
  try {
    Response response = await Dio().get(
      'http://book.musecloud.tech/addcart',
      queryParameters: {
        'productId': product.id,
        'quantity': 1,
      },
    );
    if (response.data == 'success') {
      // TODO: 添加成功
    } else {
      // TODO: 添加失败
    }
  } catch (e) {
    // TODO: 网络错误
  }
},

4. 创建购物车商品模型和解析方法

创建一个CartItem模型类和ShoppingCartData类来解析购物车数据：

class CartItem {
  final Product product;
  final int quantity;

  CartItem({required this.product, required this.quantity});

  factory CartItem.fromJson(Map<String, dynamic> json) {
    return CartItem(
      product: Product.fromJson(json['Product']),
      quantity: json['Quantity'],
    );
  }
}

class ShoppingCartData {
  final List<CartItem> items;
  final double total;

  ShoppingCartData({required this.items, required this.total});

  factory ShoppingCartData.fromJson(List<dynamic> json) {
    List<CartItem> items = json[0]['Items']
        .map((itemJson) => CartItem.fromJson(itemJson))
        .toList();
    double total = json[2]['Value'];
    return ShoppingCartData(items: items, total: total);
  }
}

Future<ShoppingCartData> getShoppingCart() async {
  try {
    Response response = await Dio().get('http://book.musecloud.tech/getshoppingcart');
    List<dynamic> jsonData = jsonDecode(response.data);
    ShoppingCartData data = ShoppingCartData.fromJson(jsonData);
    return data;
  } catch (e) {
    throw e;
  }
}

5. 集成API服务

将购物车相关接口集成到ApiService中：

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

class ApiService {
  static final String baseUrl = 'http://book.musecloud.tech';
  static Dio _dio = Dio();

  // 获取产品列表
  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<bool> addToCart({required int productId, required int quantity}) async {
    try {
      Response response = await _dio.get(
        '$baseUrl/addcart',
        queryParameters: {
          'productId': productId,
          'quantity': quantity,
        },
      );
      return response.data == 'success';
    } catch (e) {
      throw e;
    }
  }

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

6. 使用API服务

在商品详情页中，使用ApiService添加商品到购物车：

onPressed: () async {
  try {
    bool success = await ApiService.addToCart(productId: product.id, quantity: 1);
    if (success) {
      // TODO: 添加成功
    } else {
      // TODO: 添加失败
    }
  } catch (e) {
    // TODO: 网络错误
  }
},

在购物车页面中，使用ApiService获取购物车数据：

// 在_ShoppingCartState类中
@override
void initState() {
  super.initState();
  _getShoppingCart();
}

Future<void> _getShoppingCart() async {
  try {
    ShoppingCartData cartData = await ApiService.getShoppingCart();
    // TODO: 更新购物车页面显示
  } catch (e) {
    // TODO: 获取购物车数据失败
  }
}

总结

通过以上步骤，你就可以在Flutter商城应用中实现一个功能完善的悬浮购物车按钮，并通过动画展开显示购物车商品，同时还能添加结算功能。记得根据你的实际需求对代码进行完善和修改。