当 LayoutBuilder 中的 StreamBuilder 时颤振无限循环

Question

所以我正在制作一个带有 LayoutBuilder 的页面 here

在 LayoutBuilder 中，我放置了一个 StreamBuilder 和一个由 bloc class SignupFormBlo 提供支持的 TextField c。流是 BehaviorSubject

当有人在输入中输入内容时，它会触发 onChanged 函数，该函数是我的流的接收器。所以我在流中添加值然后我在 StreamTransformer 中传递值以验证值然后我让 StreamBuilder 再次构建 TextField 并显示错误消息（如果值无效).

这是问题的开始。

当我点击 TextField 并输入内容时，它会开始无限循环，如下所示：

StreamBuilder 在流中看到新值
StreamBuilder 尝试重建 TextField
这是如何触发 LayoutBuilder 构建器函数的一些信息
LayoutBuilder 构建器函数再次构建 StreamBuilder
StreamBuilder 在流中找到一个值（因为 BehaviorSubject）
从第一个被欺负的人重新开始，无限循环

提示：如果我将 BehaviorSubject 更改为 PublishSubject，一切正常

提示 2： 如果我完全删除 StreamBuilder 并只留下一个空白的 TextField，您可以在每个条目中看到 LayoutBuilder 构建器函数运行。这是正常行为吗？

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {


  SignupFormBloc _signupFormBloc;

  @override
  void initState() {
    super.initState();
    _signupFormBloc = SignupFormBloc();
  }

  @override
  Widget build(BuildContext context) {
    print('Build Run!!!!!');
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          print('Layout Builder!!!');
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: IntrinsicHeight(
                child:         StreamBuilder<String>(
                  stream: _signupFormBloc.emailStream,
                  builder: (context, AsyncSnapshot<String> snapshot) {

                    return TextField(
                      onChanged: _signupFormBloc.onEmailChange,
                      keyboardType: TextInputType.emailAddress,
                      decoration: InputDecoration(
                        hintText: 'Email',
                        contentPadding: const EdgeInsets.symmetric(horizontal: 15, vertical: 18),
                        filled: true,
                        fillColor: Colors.white,
                        errorText: snapshot.error,
                        border: new OutlineInputBorder(
                          borderSide: BorderSide.none
                        ),
                      ),

                    );
                  }
                ),
              ),
            ),
          );
        },
      )
    );
  }

  @override
  void dispose() {
    _signupFormBloc?.dispose();
    super.dispose();
  }

}


class SignupFormBloc  {

  ///
  /// StreamControllers
  ///
  BehaviorSubject<String> _emailController = BehaviorSubject<String>();


  ///
  /// Stream with Validators
  ///
  Observable<String> get emailStream => _emailController.stream.transform(StreamTransformer<String,String>.fromHandlers(handleData: (email, sink){

    final RegExp emailExp = new RegExp(r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$");

    if (!emailExp.hasMatch(email) || email.isEmpty){
      print('has error');
      sink.addError('Email format is invalid');
    } else {
      sink.add(email);
    }
  }));


  ///
  /// Sinks
  ///
  Function(String) get onEmailChange => _emailController.sink.add;


  void dispose() {
    _emailController.close();
  }



}

Answer 1

发生这种情况是因为流的误用。

罪魁祸首是这一行：

Observable<String> get emailStream => _emailController.stream.transform(...);

这一行的问题在于它每次都会创建一个新流。

这意味着bloc.emailStream == bloc.emailStream实际上是错误的。

与StreamBuilder结合使用时，表示每次有东西要求StreamBuilder重建时，后者会从头重新开始监听。

而不是 getter，您应该在 BLoC 的构造函数主体中创建流一次：

class MyBloc {
  StreamController _someController;
  Stream foo;

  MyBloc() {
    foo = _someController.stream.transform(...);
  }
}

当 LayoutBuilder 中的 StreamBuilder 时颤振无限循环

Flutter infinite loop when StreamBuilder inside LayoutBuilder

flutter

reactivex

rxdart

bloc