目前在Flutter Bloc中的mapEventToState函数没有yield。

Question

我正在尝试制作一个简单的应用程序来测试BloC模式，但是，在当前版本的BloC模式中有一个变化，即“当前状态”现在不再作为mapEventToState方法的参数发送，但根据在线文档，您可以仅使用“state”替换它，但这对我没有起作用。

以下是我的代码：

class CounterBloc extends Bloc<CounterEvent, CounterState> {

  void onIncrement(){
     add(IncrementEvent());
  }

  void onDecrement() {
     add(DecrementEvent());
  }

  @override
  // TODO: implement initialState
  CounterState get initialState => CounterState.initial();

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield state..counter += 1;
    } else if (event is DecrementEvent) {
      yield state..counter -= 1;
    }
  }
}

这是计数器状态类

class CounterState {
  int counter;

  CounterState._();

  factory CounterState.initial() {
    return CounterState._()..counter = 0;
  }
}

这是我的主要应用程序Dart文件

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

class MyApp extends StatelessWidget {
  @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> {

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CounterBloc(),
      child: CounterWidget(widget: widget),
    );
  }
}

class CounterWidget extends StatelessWidget {

  final MyHomePage widget;

  const CounterWidget({Key key, @required this.widget}) :super (key: key);

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: BlocBuilder(
          bloc: BlocProvider.of<CounterBloc>(context),
          builder: (context, CounterState state) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '${state.counter}',
                    style: Theme.of(context).textTheme.display1,
                  ),
                ],
              ),
            );
          },
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              onPressed: () => BlocProvider.of<CounterBloc>(context).onIncrement(),
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
            SizedBox(width: 10,),
            FloatingActionButton(
              onPressed: () => BlocProvider.of<CounterBloc>(context).onDecrement(),
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ],
        )
    );
  }
} 

请问有谁能帮我解决这个问题吗？

- ahmed mohamady

Answer 1

以下是完整代码，您可以复制粘贴并运行：
步骤 1：在 CounterState 中添加 CounterState({this.counter});
步骤 2： yield state..counter += 1; 不会导致 Widget build，请改为 yield CounterState(counter: state.counter + 1);

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

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

class CounterState {
  int counter;

  CounterState._();

  CounterState({this.counter}); //add this line

  factory CounterState.initial() {
    return CounterState._()..counter = 0;
  }
}

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  void onIncrement() {
    add(IncrementEvent());
  }

  void onDecrement() {
    add(DecrementEvent());
  }

  @override
  // TODO: implement initialState
  CounterState get initialState => CounterState.initial();

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      //yield state..counter += 1;
      yield CounterState(counter: state.counter + 1);
    } else if (event is DecrementEvent) {
      //yield state..counter -= 1;
      yield CounterState(counter: state.counter - 1);
    }
  }
}

class MyApp extends StatelessWidget {
  @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> {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CounterBloc(),
      child: CounterWidget(widget: widget),
    );
  }
}

class CounterWidget extends StatelessWidget {
  final MyHomePage widget;

  const CounterWidget({Key key, @required this.widget}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: BlocBuilder(
          bloc: BlocProvider.of<CounterBloc>(context),
          builder: (context, CounterState state) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '${state.counter}',
                    style: Theme.of(context).textTheme.display1,
                  ),
                ],
              ),
            );
          },
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              onPressed: () =>
                  BlocProvider.of<CounterBloc>(context).onIncrement(),
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
            SizedBox(
              width: 10,
            ),
            FloatingActionButton(
              onPressed: () =>
                  BlocProvider.of<CounterBloc>(context).onDecrement(),
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ],
        ));
  }
}

- chunhunghan

---

好的，这很好，但是我有一个问题。当触发 onPressed 时，使用这个解决方案是否比在 main.dart 文件中使用 setState 更好？ - rkdupr0n