Flutter中ChangeNotifier的构建器小部件

64jmpszr  于 2022-12-14  发布在  Flutter
关注(0)|答案(6)|浏览(172)

背景

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

问题

  • ChangeNotifier的构建器是什么?

我所尝试的
我尝试将ValueListenableBuilderChangeNotifier一起使用,但ChangeNotifier无法实现ValueListenable
我知道我可以使用Provider包中的ChangeNotifierProvider,但我想知道是否有不需要第三方包的解决方案。

pw136qt2

pw136qt21#

这是一个补充答案,演示了如何使用AnimatedBuilderChangeNotifier发生更改时重建UI。
这只是一个标准的柜台应用程序。

  • 计数器_型号.dart*
import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get count => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}
  • 主省道 *
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),
      ), 
    );
  }
}
ttygqcqt

ttygqcqt2#

ChangeNotifier是Listenable小部件的直接实现,对于Listenable,您可以使用AnimatedBuilder,它可以触发从Listenable进行重建,而无需传回特定值。此外,您的类可以从ChangeNotifier进行扩展,并向其添加新功能,您可以基于这些新功能创建自定义的Builder小部件

v64noz0r

v64noz0r3#

你可以自己写一个简单的小部件。使用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);
  }
}
ss2ws0br

ss2ws0br4#

你可以使用consumer来改变和构建你的UI!

vmdwslir

vmdwslir5#

ChangeNotifierProviderChangeNotifierProvider.value和其他提供程序的生成器是Consumer

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

mv1qrgav6#

从今天起,AnimatedBuilder已重命名并更新为ListenableBuilder
希望文档能尽快更新,但您可以在此处查看相关问题和示例https://github.com/flutter/flutter/pull/116543/files

相关问题