Flutter Bloc 01 - 快速上手计算器

理解 Bloc：

Bloc 是一种状态管理库，它使用 Streams 来管理应用程序的状态，提供了一个可预测、可测试且可维护的架构。它旨在解决 StatefulWidget 的局限性，使状态管理更加简单和高效。

为什么使用 Bloc？

• 状态的可预测性： Bloc 确保状态更改是以可预测的方式进行的，避免了意外的状态更新。
• 可测试性： 由于 Bloc 使用 Streams，因此可以轻松地测试状态变化，确保应用程序的健壮性。
• 可维护性： Bloc 的模块化设计使代码易于理解和维护，从而减少了调试和重构的开销。

安装 Bloc：

1. 在终端中运行 flutter pub add bloc。
2. 在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_bloc: ^8.0.1

配置 Bloc：

1. 在 main.dart 文件中，使用 BlocProvider 来提供 Bloc 实例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<CounterBloc>(
      create: (context) => CounterBloc(),
      child: MaterialApp(
        title: 'Bloc Demo',
        home: MyHomePage(),
      ),
    );
  }
}

2. 在小部件中，使用 BlocBuilder 来监听 Bloc 的状态变化：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bloc Demo'),
      ),
      body: BlocBuilder<CounterBloc, int>(
        builder: (context, count) {
          return Center(
            child: Text('Count: $count'),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterBloc>().add(CounterEvent.increment),
        child: Icon(Icons.add),
      ),
    );
  }
}

编写计算器示例：

1. 创建一个 CounterBloc 类：

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

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

2. 创建一个 CounterEvent 枚举类：

enum CounterEvent { increment, decrement }

3. 在小部件中使用 BlocProvider 和 BlocBuilder：

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bloc Counter'),
      ),
      body: BlocBuilder<CounterBloc, int>(
        builder: (context, count) {
          return Center(
            child: Text('Count: $count'),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterBloc>().add(CounterEvent.increment),
        child: Icon(Icons.add),
      ),
    );
  }
}

通过遵循这些步骤，您将能够快速上手使用 Bloc 编写 Flutter 应用程序。