Flutter中用于ChangeNotifier的构建小部件

Question

背景

• ValueNotifier有一个ValueListenableBuilder小部件。
• Stream有一个StreamBuilder小部件。
• Future有一个FutureBuilder小部件。

问题

• ChangeNotifier的构建器是什么？

我尝试过的

我尝试使用ValueListenableBuilder与ChangeNotifier，但ChangeNotifier没有实现ValueListenable。

我知道我可以使用Provider包中的ChangeNotifierProvider，但我想知道是否有不需要第三方包的解决方案。

- Suragch

---

AnimatedBuilder（或者如果你想要一些继承自AnimatedWidget的自定义类，则使用AnimatedWidget） - pskink

@pskink，有趣！从名字上我猜不出来。 - Suragch

有时候，我感觉就像是在你走过的相同步骤中行走。每当我试图构建你的“极简主义”架构时，我看到你的解决方案跳了出来。我的页面的ViewModel/Controller/Manager类是一个 ChangeNotifier，其中包含多个简单/复杂的 ValueNotifiers。通过整个ViewModel notifyListeners() 或其精细调整的属性ValueNotifiers，UI会相应地得到通知。我使用 ChangeNotifier 作为 ViewModel，因为 ValueNotifier 子类需要进行等值检查 == 进行通知。这意味着重写该 ==+hashCode，或者使用 Equatable。 - om-ha

因此，我正在寻找一个“ChangeNotifier”构建器。而这个问题/答案完美地适合这种特定的情况。 - om-ha

@om-ha，我喜欢ChangeNotifier的简单性和易用性。但是，在我的值通知器中，我从来没有必要重写==和hashCode。 - Suragch

Answer 1

使用`ListenableBuilder`。

这是一个补充答案，演示如何使用`ListenableBuilder`在`ChangeNotifier`发生变化时重新构建UI。

这只是一个标准的计数器应用程序。

counter_model.dart

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get count => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

main.dart

import 'counter_model.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _counterModel = CounterModel();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            ListenableBuilder(
              listenable: _counterModel,
              builder: (context, child) {
                return Text(
                  '${_counterModel.count}',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counterModel.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

更新：先前的答案演示了AnimatedBuilder的使用。

注意：在这种特殊情况下（以及大多数情况下），ValueNotifier和ValueListenableBuilder就足够了。请参阅Flutter状态管理入门。

- Suragch

Answer 2

ChangeNotifier是Listenable Widget的直接实现，对于Listenable，您可以使用AnimatedBuilder，它可以从Listenable触发重建而无需传递特定的值。另外，您的类可以扩展自ChangeNotifier并添加新功能，您可以基于这些新功能创建自定义的Builder Widget。

- Amir Hossein Mirzaei

Answer 3

从今天起，AnimatedBuilder被更名并更新为ListenableBuilder

希望文档很快更新，但您可以在此处查看相关问题和示例https://github.com/flutter/flutter/pull/116543/files

- Suat Özkaya

---

谢谢提到 ListenableBuilder！真的很酷，他们终于做了一个更合理的类名！ - Erlend

令人惊叹的解决方案！ - undefined

Answer 4

您可以自己编写一个简单的小部件。 使用 setState 作为 ChangeNotifier 的监听器。

class ChangeNotifierBuilder<T extends ChangeNotifier> extends StatefulWidget {
  const ChangeNotifierBuilder({
    Key? key,
    required this.value,
    required this.builder,
  }) : super(key: key);

  final T value;

  final Widget Function(BuildContext context, T value) builder;

  @override
  _ChangeNotifierBuilderState<T> createState() =>
      _ChangeNotifierBuilderState<T>();
}

class _ChangeNotifierBuilderState<T extends ChangeNotifier>
    extends State<ChangeNotifierBuilder<T>> {
  @override
  void initState() {
    widget.value.addListener(_listener);
    super.initState();
  }

  @override
  void didUpdateWidget(covariant ChangeNotifierBuilder<T> oldWidget) {
    if (widget.value != oldWidget.value) {
      _miggrate(widget.value, oldWidget.value, _listener);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    widget.value.removeListener(_listener);
    super.dispose();
  }

  void _miggrate(Listenable a, Listenable b, void Function() listener) {
    a.removeListener(listener);
    b.addListener(listener);
  }

  void _listener() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return widget.builder(context, widget.value);
  }
}

- kvii2202

---

在 _migrate(..) 函数中，应该是 b.removeListener() 和 a.addListener()。 - Shubham Gupta

Answer 5

您可以使用“Consumer for Change”和UI的构建！请尝试以下链接：https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

- Anushka Pubudu

---

“Consumer”小部件是provider软件包的一部分，我正在寻找非第三方解决方案。不过，阅读您提供的链接对我很有帮助，因为它自上次阅读以来已经更新了。 - Suragch

Answer 6

ChangeNotifierProvider、ChangeNotifierProvider.value和其他提供程序的构建器是一个Consumer：

ChangeNotifierProvider(
  create: (context) => CounterModel(),
  child: Consumer<CounterModel>(
    builder: (context, model, child) {
      return Text('${model.count}');
    }
  ),
),

- BambinoUA

---

我认为它需要是 ChangeNotifierProvider<CounterModel>(...)。 - Yahya Uddin