mapEventToState 未使用 BLOC 模式触发，Flutter答案

【问题标题】：mapEventToState not trigerring using BLOC pattern, FluttermapEventToState 未使用 BLOC 模式触发，Flutter
【发布时间】：2020-07-05 11:39:43
【问题描述】：

我正在使用颤振开发应用程序并决定使用谷歌推荐的 bloc 模式，但是我定义的事件永远不会被触发。我将事件定义为当发生连接检查时，控制器会将布尔值返回到视图。

下面是相关代码

登录控制器.dart

import 'package:XXXXX/connection.dart';
import 'package:bloc/bloc.dart';
import 'package:connectivity/connectivity.dart';


class LoginBloc extends Bloc<Connectivity,bool> {
  @override
  bool get initialState => false;

  @override
  Stream<bool> mapEventToState(Connectivity event) async*{
    // TODO: implement mapEventToState
    switch(await event.checkConnectivity()){
      case ConnectivityResult.mobile:
      yield true;
      break;
      case ConnectivityResult.wifi:
      yield true;
      break;
      case ConnectivityResult.none:
      yield false;

    }
  }
}

class LoginWidget extends StatefulWidget {
  @override
  LoginWidgetState createState() {
    return LoginWidgetState();
  }
}

class LoginWidgetState extends State<LoginWidget> {
@override
  Widget build(BuildContext context) {
    //final _loginBloc = BlocProvider.of<LoginBloc>(context);
    const oneSec = const Duration(seconds: 1);
    //_loginBloc.add(ConnectivityResult.checkConnectivity());
    new Timer.periodic(oneSec, (Timer t) => Connectivity().checkConnectivity());
    return Scaffold(
        body: BlocProvider(
      builder: (BuildContext context) => LoginBloc(),
      child: new Form(
        key: _formKey,
        child: ListView(
          padding: EdgeInsets.only(top: 50.0),
          children: <Widget>[
            Image.asset(
              'assets/images/XXXXX_logo.jpg',
              height: 70,
              width: 100,
              alignment: Alignment.center,
            ),
            _buildTextFields(),
            _buildButtons(),
          ],
        ),
      ),
    ));
  }

  Widget _buildTextFields() {
    return new Container(
      padding: EdgeInsets.only(left: 16.0, right: 16.0),
      child: new Column(
        children: <Widget>[
          new Container(
            child: new TextFormField(
              controller: _userFilter,
              decoration: new InputDecoration(labelText: 'Username'),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Username cannot be empty';
                }
                return null;
              },
            ),
          ),
          new Container(
            child: new TextFormField(
                controller: _passwordFilter,
                decoration: new InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Password cannot be empty';
                  }
                  return null;
                }),
          )
        ],
      ),
    );
  }

  Widget _buildButtons() {
    return new Container(
      child: new Column(
        children: <Widget>[
          new RaisedButton(
              child: new Text('Login'),
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  _loginPressed();
                }
              }),
          new BlocBuilder<LoginBloc, bool>(
              builder: (BuildContext context, bool state) {
            return Container(
              color: state ? Colors.greenAccent : Colors.redAccent,
              padding: EdgeInsets.all(10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Text(
                    state ? "Connected" : "No Internet Connection",
                    textAlign: TextAlign.center,
                  )
                ],
              ),
            );
          }),
        ],
      ),
    );
  }

【问题讨论】：

标签： flutter dart bloc

【解决方案1】：

正如函数名称中所述mapEventToState 实际所做的是响应添加到 Bloc 接收器的事件将被调用，然后您将能够将yield 状态输出，这将被接收发生这种情况时，通过 UI 中的 BlocBuilder 进行操作，因此为了使这项工作按您的预期工作，您可能应该创建一个事件，然后使用例如 BlocProvider 实例化您的 Bloc 并从那里分派一个事件。

所以根据你的代码

    final _loginBloc = BlocProvider.of<LoginBloc>(context);
    _loginBloc.add(YourEvent());

然后在mapEventToState

 Stream<bool> mapEventToState(LoginEvent event) async*{
    if (event is YourEvent) {
      yield YourState();
    }

【讨论】：