Question

我有一个 notifier.dart 文件，我在其中声明了一些 ChangeNotifiers。其中之一是 OpacityChangeNotifier。

OpacityChangeNotifier 类：

class OpacityChangeNotifier extends ChangeNotifier {
  double _opacity = 1.0;
  double get opacity => _opacity;

  void changeOpacity(double providedOpacity) {
    _opacity = providedOpacity;
    notifyListeners();
  }

  void printOpacity() {
    print(_opacity);
  }
}

这是我的着色应用程序，我希望用户从 1.0 的不透明度开始。然后他/她可以改变它。

这是 opacity_picker 小部件

final _opacityProvider = ChangeNotifierProvider<OpacityChangeNotifier>((ref) {
  return OpacityChangeNotifier();
});

class OpacityPicker extends ConsumerWidget {
  const OpacityPicker({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final opacityPicker = watch(_opacityProvider);
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconButton(
            onPressed: () {
              opacityPicker.changeOpacity(0.1);
            },
            icon: Icon(Icons.opacity, size: 20),
          ),
          IconButton(
            onPressed: () {
              opacityPicker.changeOpacity(0.5);
            },
            icon: Icon(Icons.opacity, size: 20),
          ),
          IconButton(
            onPressed: () {
              opacityPicker.changeOpacity(1.0);
            },
            icon: Icon(Icons.opacity, size: 20),
          ),
        ],
      ),
    );
  }
}

现在我想在另一个名为 menu_items 的小部件中使用这个 opacity_picker。我添加了一个简单的图标按钮来测试不透明度的值（0.1,0.5,1.0）是否得到更新。

IconButton(
  onPressed: () {
     opacity.printOpacity();
  },
  icon: Icon(Icons.dock_rounded),
)

但似乎该值与我提供的默认值相同：1.0。关于如何更新我提供的值的任何解决方案或如何更改不透明度的任何其他方式？

Answer 1

我不熟悉您如何在 ChangeNotifierProvider 类上方实例化 OpacityPicker。所以我不确定这是否正确。

由于 Provider 是用 InheritedWidget 构建的，因此您希望应用的任何部分对 Provider 状态的更改“做出反应”，都需要是 {{1} 下的子项}}。

确保这一点的一种方法是用您的 ChangeNotifierProvider 包裹 MyApp。因此，您的整个应用程序都在 Provider 的 InheritedWidget 范围内。 Remi（Provider 的作者）在 his example code 中展示了这一点：

ChangeNotifierProvider

他正在使用 void main() { runApp( /// Providers are above [MyApp] instead of inside it, so that tests /// can use [MyApp] while mocking the providers MultiProvider( providers: [ ChangeNotifierProvider(create: (_) => Counter()), ], child: const MyApp(), ), ); }，但您可以看到 MultiProvider 是 MyApp() 的孩子。

您是否在您的应用中做类似的事情？

ChangeNotifier

1 个答案: