一、购物车功能

二、ShoppingCartProvider实现

class ShoppingCartProvider extends InheritedWidget {
  final List<CartItem> items;
  final Function(CartItem) addItem;
  final Function(CartItem) removeItem;

  const ShoppingCartProvider({
    required this.items,
    required this.addItem,
    required this.removeItem,
    required Widget child,
  }) : super(child: child);

  static ShoppingCartProvider of(BuildContext context) {
    final ShoppingCartProvider? result = context
        .dependOnInheritedWidgetOfExactType<ShoppingCartProvider>();
    assert(result != null, 'No ShoppingCartProvider found');
    return result!;
  }

  double get total =>
      items.fold(0, (sum, item) => sum + item.price);

  @override
  bool updateShouldNotify(ShoppingCartProvider oldWidget) {
    return items.length != oldWidget.items.length;
  }
}

三、数据流转

四、状态管理策略

五、ProductCard组件

class ProductCard extends StatelessWidget {
  final CartItem product;

  const ProductCard({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      child: ListTile(
        leading: Text(product.image, style: const TextStyle(fontSize: 32)),
        title: Text(product.name),
        subtitle: Text('¥${product.price.toStringAsFixed(2)}'),
        trailing: ElevatedButton(
          onPressed: () {
            ShoppingCartProvider.of(context).addItem(product);
          },
          child: const Text('添加'),
        ),
      ),
    );
  }
}

六、CartSummary组件

class CartSummary extends StatelessWidget {
  const CartSummary({super.key});

  @override
  Widget build(BuildContext context) {
    final cart = ShoppingCartProvider.of(context);

    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 4,
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('购物车 (${cart.items.length})'),
              Text(
                '总计: ¥${cart.total.toStringAsFixed(2)}',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.red,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net