dart - Flutter:在 StatelessWidget 中哪里添加监听器?

如果我使用的是 StatefulWidget,那么我将在 initState 方法中监听 Stream。我会在 StatelessWidget 中哪里做同样的事情(比如使用 Bloc 和流进行状态管理)?我可以在构建方法中做到这一点,但由于这些是重复的,我想知道是否有比检查现有监听器更有效的方法,如下所示。我知道这是一个多余且无用的示例,但这只是为了说明问题。

    import "package:rxdart/rxdart.dart";

    import 'package:flutter/material.dart';

    final counter = BehaviorSubject<int>();
    final notifier = ValueNotifier<int>(0);

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        if (!counter.hasListener)
          counter.listen((value) => notifier.value += value);  

        return MaterialApp(
          home: Scaffold(
            body: Center(
              child:FlatButton(
                onPressed: () => counter.add(1),
                child: ValueListenableBuilder(
                  valueListenable: notifier,
                  builder: (context, value, child) => Text(
                    value.toString()
                  ),
                ),
              )
            ),
          )
        );
      }
    }

最佳答案

没有一种干净的方法可以让 StatelessWidget 监听 Listenable/Stream。 你将总是需要一个 StatefulWidget。

另一方面,您可以使用组合来编写 StatefulWidget 一次,然后就可以完成它。

该模式的常见示例是 ValueListenableBuilderStreamBuilderAnimatedBuilder 等小部件。但也可以做同样的事情,听。

你会这样使用它:

class Foo extends StatelessWidget {
  Foo({Key key, this.counter}): super(key: key);

  final ValueListenable<int> counter;

  @override
  Widget build(BuildContext context) {
    return ValueListenableListener(
      valueListenable: counter,
      onChange: (value) {
        // TODO: do something
      },
      child: Something(),
    );
  }
}

ValueListenableListener是这样实现的:

class ValueListenableListener<T> extends StatefulWidget {
  const ValueListenableListener(
      {Key key, this.valueListenable, this.onChange, this.child})
      : super(key: key);

  final ValueListenable<T> valueListenable;
  final ValueChanged<T> onChange;
  final Widget child;

  @override
  _ValueListenableListenerState createState() =>
      _ValueListenableListenerState();
}

class _ValueListenableListenerState extends State<ValueListenableListener> {
  @override
  void initState() {
    super.initState();
    widget.valueListenable?.addListener(_listener);
    _listener();
  }

  @override
  void didUpdateWidget(ValueListenableListener oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.valueListenable != widget.valueListenable) {
      oldWidget.valueListenable?.removeListener(_listener);
      widget.valueListenable?.addListener(_listener);
      _listener();
    }
  }

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

  void _listener() {
    widget.onChange?.call(widget.valueListenable.value);
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

https://stackoverflow.com/questions/54797911/

相关文章:

dart - Flutter BLoC 模式 - 如何在流事件后导航到另一个屏幕?

android - Flutter 上的小部件的 onResume() 和 onPause()

android - flutter : How can I add divider between

flutter - 如何在 AppBar 中用图像替换标题

flutter - 如何更改 FloatingActionButton 的大小?

dart - 如何在 flutter 中实现推送通知

android - 如何在 TextFormField 中显示/隐藏密码?

dart - 在 Flutter 中设置环境变量

dart - Flutter ListView 项目点击监听器

dart - Flutter:如何制作随机颜色生成器背景