【Flutter】 Flutter 状态管理 BLoC 简明使用指南

news2024/9/21 0:25:04

文章目录

- - 一、前言
  - 二、Flutter BLoC 的安装和配置
  - 三、Flutter BLoC 的基本使用
  - 四、Flutter BLoC 的简单示例
  - 五、总结

一、前言

🎉想要精通 Flutter，掌握更多技巧和最佳实践？好消息来了！👉 Flutter专栏->Flutter Developer 101 入门小册 正在等你！📚

🔍这里有你需要的所有 Flutter 学习资源，包括代码示例和深度解析。🎯

⏰专栏内容持续更新，价格也会随之上涨。现在加入，享受最优惠的价格！💰

🚀现在，让我们开始今天的 Flutter 之旅吧！🌍

在 Flutter 的世界里，状态管理是一个永恒的话题。

有许多不同的状态管理方案，而 BLoC（Business Logic Component）设计模式是其中的佼佼者。

BLoC 是由 Google 开发者 Advocate Paolo Soares 和 Cong Hui 提出的，它的主要目标是将业务逻辑从 UI 中分离出来，使得代码更加清晰，易于测试和复用。

那么，为什么我们要选择 Flutter BLoC 呢？

首先，BLoC 是基于流（Stream）的，这意味着我们可以利用 Dart 的强大的异步特性。

其次，BLoC 是完全独立于 UI 的，这使得我们可以在不同的 UI 组件之间共享和复用状态。

最后，BLoC 是由 Google 官方推荐的，这意味着它有着良好的社区支持和丰富的学习资源。

二、Flutter BLoC 的安装和配置

要开始使用 Flutter BLoC，我们首先需要在项目中安装它。打开你的 pubspec.yaml 文件，添加以下依赖：

dependencies:
  flutter_bloc: ^8.1.3

然后，运行 flutter packages get 命令来获取包。

三、Flutter BLoC 的基本使用

在 Flutter BLoC 中，我们主要会使用到三个组件：BLoC、BlocProvider 和 BlocBuilder。

首先，我们需要创建一个 BLoC。BLoC 是一个简单的 Dart 类，它接收输入（事件）并产生输出（状态）。以下是一个简单的 BLoC 的例子：

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;
    }
  }
}

然后，我们需要使用 BlocProvider 来提供 BLoC。BlocProvider 是一个 Flutter widget，它将 BLoC 提供给它的子 widget。以下是如何使用 BlocProvider 的例子：

BlocProvider(
  create: (context) => CounterBloc(),
  child: CounterPage(),
)

最后，我们需要使用 BlocBuilder 来响应状态的变化。BlocBuilder 是一个 Flutter widget，它接收一个 BLoC 和一个 builder 函数，当 BLoC 的状态发生变化时，它会调用 builder 函数并重建 widget。以下是如何使用 BlocBuilder 的例子：

BlocBuilder<CounterBloc, int>(
  builder: (context, count) {
    return Text('$count');
  },
)

四、Flutter BLoC 的简单示例

让我们通过一个简单的计数器应用来看看如何在实践中使用 Flutter BLoC。

在这个应用中，我们将创建一个简单的计数器，它有两个按钮，一个用于增加计数，一个用于减少计数。

以下是完整的代码：

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

enum CounterEvent { increment, decrement }

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;
    }
  }
}

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: BlocBuilder<CounterBloc, int>(
        builder: (context, count) {
          return Center(
            child: Text(
              '$count',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                BlocProvider.of<CounterBloc>(context).add(CounterEvent.increment);
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () {
                BlocProvider.of<CounterBloc>(context).add(CounterEvent.decrement);
              },
            ),
          ),
        ],
      ),
    );
  }
}

在这个例子中，我们首先定义了一个 CounterEvent 枚举，它有两个值：increment 和 decrement。然后，我们创建了一个 CounterBloc，它接收 CounterEvent 作为输入，并输出一个整数作为状态。在 mapEventToState 方法中，我们根据接收到的事件来更新状态。

在 CounterPage 中，我们使用 BlocBuilder 来构建 UI。当 CounterBloc 的状态发生变化时，BlocBuilder 会调用它的 builder 函数并重建 UI。在 floatingActionButton 中，我们添加了两个按钮，一个用于发送 increment 事件，一个用于发送 decrement 事件。