Question

背景

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

问题

ChangeNotifier 的构建器是什么？

我尝试了什么

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

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

Answer 1

ChangeNotifier 是Listenable Widget 的直接实现，对于Listenable，您可以使用AnimatedBuilder，它会触发从Listenable 重建而不返回特定值此外，您的类可以从 ChangeNotifier 扩展并为其添加新功能，您可以基于这些新功能创建自定义 Builder 小部件

Answer 2

这是一个补充答案，演示了使用 AnimatedBuilder 在 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(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState 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>[
            Text(
              'You have pushed the button this many times:',
            ),
            AnimatedBuilder(
              animation: _counterModel,
              builder: (context, child) {
                return Text(
                  '${_counterModel.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              }
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counterModel.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

Answer 3

您可以使用使用者进行更改和构建您的用户界面！试试这些 - https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

Flutter 中 ChangeNotifier 的构建器小部件

背景

问题

我尝试了什么

3 个答案: