Flutter BLoc 传递参数答案

【问题标题】：Flutter BLoc pass parametersFlutter BLoc 传递参数
【发布时间】：2020-09-19 07:28:56
【问题描述】：

我正在尝试按照 bloc 模式将参数传递给 bloc 事件，我找到了这篇文章，但是我的 dart 文档找不到 dispatch（事件）方法。

Flutter BLoC - How to pass parameter to event?

如何将参数传递给这样的东西

main.dart

这行得通

_counterBloc.add(Counter.increment);

但这不是

_counterBloc.add(Counter.increment(3));

bloc.dart

import 'package:bloc/bloc.dart';

enum CounterEvents { increment }

class CounterBloc extends Bloc<CounterEvents, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvents event) async* {
    switch (event) {
      case CounterEvents.increment:
        print(event);
        yield state + 1;
        break;
    }
  }
}

【问题讨论】：

标签： flutter flutter-bloc

【解决方案1】：

考虑制作一个自定义事件。您的解决方案应该是这样的（没有检查错误，但范式是正确的）：

abstract class CounterEvent {}

class Increment extends CounterEvent {
    int amount;
    Increment({this.amount});
}

然后在你的集团中：

class CounterBloc extends Bloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    if (event is Increment) {
       yield state + event.amount;
    }
  }
}

【讨论】：

【解决方案2】：

你应该像下面这样写 CounterEvent：

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

enum EventStatus { INCREMENT, DECREMENT }

class CounterEvent {
  final int value;
  final EventStatus status;

  const CounterEvent({@required this.value, @required this.status});
}

class CounterBLoC extends Bloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(event) async* {
    if (event.status == EventStatus.INCREMENT) {
      yield state + event.value;
    } else if (event.status == EventStatus.DECREMENT) {
      yield state - event.value;
    }
  }
}

并在小部件中使用它们，如下所示：

@override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBLoC>(context);
    return Scaffold(
      body: Center(
        child: BlocBuilder<CounterBLoC, int>(
          builder: (ctx, state) {
            return Text(
              'count: $state',
              style: TextStyle(fontSize: 28),
            );
          },
        ),
      ),
      floatingActionButton: Align(
        alignment: Alignment.bottomRight,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FloatingActionButton(
              onPressed: () {
                counterBloc
                    .add(CounterEvent(value: 5, status: EventStatus.INCREMENT));
              },
              child: Icon(Icons.add_circle),
            ),
            FloatingActionButton(
              onPressed: () {
                counterBloc
                    .add(CounterEvent(value: 5, status: EventStatus.DECREMENT));
              },
              child: Icon(Icons.remove_circle),
            ),
          ],
        ),
      ),
    );
  }

确保在 main 中初始化你的 bloc：


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: BlocProvider<CounterBLoC>(
        create: (ctx) => CounterBLoC(),
        child: TestBlocWidget(),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

如果您尝试使用 bloc 模式重建 Counter App，阅读这篇文章可能会有所帮助。

https://bloclibrary.dev/#/fluttercountertutorial?id=counter-app

【讨论】：