购买 Flutter Provider 产品

以下是您的错误以及为什么它不适合您：

1. 使用两个列表（Name和Price）而不是结构。
2. 没有共享存储。
3. 人们不知道篮子应该如何工作，数据应该如何进入篮子。

下面是一个实际示例及其分析：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MainApp());
}

class Product {
  const Product(this.name, this.price);

  final String name;
  final int price;
}

class Store with ChangeNotifier {
  Set<Product> _products = <Product>{
    Product('Апельсин', 70),
    Product('Мандарин', 60),
    Product('Помидор', 80),
  };

  List<Product> get products => _products.toList();

  Product? _cart = null;

  Product? get cart => _cart;

  void addToCart(Product product) {
    _cart = product;

    notifyListeners();
  }

  void removeFromCart(Product product) {
    _cart = null;

    notifyListeners();
  }

  void buy() {
    _products.remove(_cart);

    _cart = null;

    notifyListeners();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Store()),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main'),
      ),
      body: ListView.builder(
        itemCount: context.watch<Store>().products.length,
        itemBuilder: (BuildContext context, int index) {
          final product = context.watch<Store>().products[index];

          return Card(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 10, top: 50, bottom: 50),
                  child: Text(product.name.toString()),
                ),
                Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(left: 100, top: 50, bottom: 50),
                      child: Text(product.price.toString()),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 100),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          TextButton(
                              onPressed: () async {
                                context.read<Store>().addToCart(product);

                                await Navigator.push(
                                  context,
                                  CupertinoPageRoute(
                                    builder: (context) => const SalePage(),
                                  ),
                                );
                                
                                context.read<Store>().removeFromCart(product);
                              },
                              child: const Text('Купить')),
                        ],
                      ),
                    )
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SalePage'),
      ),
      floatingActionButton: FloatingActionButton(
        key: const Key('floatingActionButton'),
        onPressed: () => context.read<Store>().buy(),
        tooltip: 'Buy',
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      body: ListView.builder(
        itemCount: context.watch<Store>().cart != null ? 1 : 0,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 10, top: 50, bottom: 50),
                  child: Text(context.watch<Store>().cart!.name.toString()),
                ),
                Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(left: 100, top: 50, bottom: 50),
                      child:
                          Text(context.watch<Store>().cart!.price.toString()),
                    )
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

类Product代表了产品的本质。它有两个属性：

• name——产品名称。
• price- 价格。

类Store是应用程序的主要状态存储。它是使用 mixin 实现的ChangeNotifier，它允许小部件收到状态更改的通知。

主要性能Store：

• _products：有很多产品可供购买。
• _cart：添加到“购物车”进行购买的所选产品。

方法Store：

• products：返回产品列表的 getter。
• cart：返回购物车中当前产品的 getter。
• addToCart(Product product)：将产品添加到购物车。
• removeFromCart(Product product): 清空垃圾箱。
• buy()：从可用产品列表中删除产品，清空购物车。

它是如何运作的notifyListeners()？

该方法notifyListeners()通知所有订阅的小部件（通过Provider）存储状态已更改。这允许您使用更新的数据自动重建界面。

转帐Store方式Provider：

Store要从应用程序中的任何位置访问，请使用provider.

环境Provider：

在应用程序的根部（在 MainApp 中），Store 通过 ChangeNotifierProvider 传递：

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => Store()),
  ],
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyHomePage(),
  ),
)

现在任何子小部件都可以使用以下方式访问商店：

• context.watch<Store>()：读取状态并在更改时自动重建。
• context.read<Store>()：读取状态而不订阅更改。

顺便说一句，代码几乎已经准备好与购物车中的许多产品一起使用，因为这就是我最初完成此任务的方式。如果你想练习的话，就自己尝试一下吧！