如何重建Singleton Value Change的颤音小部件

Question

每当我的全球Singelton中的价值变化时，我都在尝试重建一个陈述的小部件，但我很困惑。

我的目标是每次在整个应用程序中更改推车时重建我的购物车图标。

我知道，只要更改Singelton 值，我就需要发出通知。并在我的状态小部件中聆听该通知，但是我该怎么做？

任何帮助将不胜感激。

我的全球Singelton

library #######.globals;

import 'package:flutter/material.dart';

class GlobalSingleton extends ChangeNotifier {
  static final GlobalSingleton _instance = GlobalSingleton._internal();

  // passes the instantiation to the _instance object
  factory GlobalSingleton() {
    return _instance;
  }

  //initialize variables in here
  GlobalSingleton._internal() {
    cartSize = 0;
  }

  late int cartSize;
}

我的状态小部件

import 'package:######/globals/globals.dart';
import 'package:flutter/material.dart';

class BuildMarketplaceCartIcon extends StatefulWidget {
  const BuildMarketplaceCartIcon({Key? key}) : super(key: key);

  @override
  State<BuildMarketplaceCartIcon> createState() =>
      _BuildMarketplaceCartIconState();
}

class _BuildMarketplaceCartIconState extends State<BuildMarketplaceCartIcon> {
  CRUDMarketplaceCart localCartData = CRUDMarketplaceCart();

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
      },
      child: Container(
        width: 72,
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Icon(Icons.shopping_cart),
                Text(
                  'Cart',
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
            Positioned(
              top: 0,
              right: 0,
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 6,
                  vertical: 2,
                ),
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
                alignment: Alignment.center,
                child: Text(
                  '${globals.GlobalSingleton().cartSize}',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

使用changeNotifier时，您需要调用notifyListeners当值更改时。您还需要让小部件收听changeNotifier，以便知道何时重建。

这样做的最常见方法是使用提供者 package，其中包括conseNotifierProviderProviderProviderProviderProviderProvider小部件。

使用提供商，您的代码看起来像这样：

class GlobalSingleton extends ChangeNotifier {
  static final GlobalSingleton _instance = GlobalSingleton._internal();

  // passes the instantiation to the _instance object
  factory GlobalSingleton() {
    return _instance;
  }

  //initialize variables in here
  GlobalSingleton._internal() {
    _cartSize = 0;
  }

  late int _cartSize;

  int get cartSize => _cartSize;

  void set cartSize(int newCartSize) {
    _cartSize = newCartSize;
    notifyListeners();
  }
}

在这里，我们更新您的Singleton，以便每当设置CartSize时，都会调用notifyListeners（）。

接下来，您需要更新小部件以收听更改：

import 'package:######/globals/globals.dart';
import 'package:flutter/material.dart';

class BuildMarketplaceCartIcon extends StatefulWidget {
  const BuildMarketplaceCartIcon({Key? key}) : super(key: key);

  @override
  State<BuildMarketplaceCartIcon> createState() =>
      _BuildMarketplaceCartIconState();
}

class _BuildMarketplaceCartIconState extends State<BuildMarketplaceCartIcon> {
  CRUDMarketplaceCart localCartData = CRUDMarketplaceCart();

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Container(
        width: 72,
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Icon(Icons.shopping_cart),
                Text(
                  'Cart',
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
            Positioned(
              top: 0,
              right: 0,
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 6,
                  vertical: 2,
                ),
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
                alignment: Alignment.center,
                child: ChangeNotifierProvider.value(
                  value: GlobalSingleton(),
                  child: Consumer<GlobalSingleton>(
                    builder: (context, singleton, child) {
                      return Text(
                        '${singleton.cartSize}',
                      );
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这里，我将提供商窗口小部件直接封闭consumer widget-但是，如果您需要Singleton的值在一个以上的位置，您可以将提供商更高的位置放在小部件树上，以便它是任何consumper的共同祖先，它会听取Singleton中的更改。