面试题：Flutter中Provider在电商应用状态管理的基础使用

Question

在一个简单的Flutter电商应用场景中，商品列表的展示依赖于购物车中商品数量的变化。请描述如何使用Provider来实现购物车数量变化时商品列表界面的自动更新，包括创建Provider、监听数据变化的基本步骤。

Answer 1

1. 创建Provider：
   • 首先定义一个数据模型来表示购物车，例如创建一个Cart类，包含商品列表和商品数量等属性。

   class Cart {
     List<Product> products;
     int get totalItemCount {
       return products.length;
     }
     Cart({this.products = const []});
   }
   

   • 创建一个继承自ChangeNotifier的CartProvider类，用于管理购物车数据并通知监听器数据变化。

   import 'package:flutter/foundation.dart';
   
   class CartProvider extends ChangeNotifier {
     Cart _cart = Cart();
   
     Cart get cart => _cart;
   
     void addProduct(Product product) {
       _cart.products.add(product);
       notifyListeners();
     }
   
     void removeProduct(Product product) {
       _cart.products.remove(product);
       notifyListeners();
     }
   }
   

2. 在应用中提供Provider：
   • 在main.dart中，使用Provider将CartProvider提供给整个应用。

   import 'package:flutter/material.dart';
   import 'package:provider/provider.dart';
   
   void main() {
     runApp(
       MultiProvider(
         providers: [
           ChangeNotifierProvider(create: (context) => CartProvider()),
         ],
         child: const MyApp(),
       ),
     );
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         home: const MyHomePage(),
       );
     }
   }
   

3. 监听数据变化并更新商品列表：
   • 在商品列表页面，使用Consumer来监听CartProvider中数据的变化。

   import 'package:flutter/material.dart';
   import 'package:provider/provider.dart';
   
   class ProductListPage extends StatelessWidget {
     const ProductListPage({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('Product List'),
         ),
         body: Consumer<CartProvider>(
           builder: (context, cartProvider, child) {
             return ListView.builder(
               itemCount: productList.length,
               itemBuilder: (context, index) {
                 final product = productList[index];
                 return ListTile(
                   title: Text(product.name),
                   subtitle: Text('Price: ${product.price}'),
                   trailing: Text('In Cart: ${cartProvider.cart.products.contains(product)? 'Yes' : 'No'}'),
                 );
               },
             );
           },
         ),
       );
     }
   }
   

   • 这样，当购物车中商品数量通过CartProvider的方法（如addProduct或removeProduct）发生变化时，notifyListeners会通知Consumer，从而使商品列表界面自动更新。