flutter中Bloc的使用

通过这上图可以获取如下信息

1. ui层，逻辑层和数据层进行了分离；
2. 数据层和ui层通过BlocProver进行关联；
3. ui层通过context.read<HomeBloc>().add(LoginEvent("account", "pwd"));发送Event到bloc中；
4. bloc中通过emit将处理的结果发送到UI层
5. 数据的请求等到逻辑都在data中请求；

第一步:导入相关的库

flutter_bloc: ^8.0.1
bloc: ^8.0.3

核心代码

这里是将bloc和ui进行管理的地方；

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

abstract class BaseBlocState<T extends StatefulWidget,
        LMBloc extends Bloc<dynamic, dynamic>> extends State<T>
    with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<LMBloc>(
      create: (context) => createBloc(),
      child: buildView(context),
    );
  }

  LMBloc createBloc();

  Widget buildView(BuildContext context);
}

子类实现

import 'package:flutter/material.dart';
import 'package:lm_bloc_architecture/base_state.dart';
import 'package:lm_bloc_architecture/home/bloc/home_bloc.dart';
import 'package:lm_bloc_architecture/home/bloc/home_event.dart';
import 'package:lm_bloc_architecture/home/bloc/home_state.dart';
import 'package:lm_bloc_architecture/home/repository/home_repository.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends BaseBlocState<HomePage, HomeBloc> {
  @override
  Widget buildView(BuildContext context) {
    // TODO: implement buildView
    return Scaffold(
      appBar: AppBar(
        title: const Text("测试标题内容"),
      ),
      body: BlocConsumer<HomeBloc, HomeState>(listener: (context, state) {
        if (state is LoginResult) {
          print("这里收到了一个从逻辑发送过来的事件 == ${state.result}");
        }
      }, builder: (context, state) {
        return FloatingActionButton(onPressed: () {
          /// 发送一个事件到逻辑层，并把参数带进去
          print("第一步：发送一个事件到逻辑层");
          context.read<HomeBloc>().add(LoginEvent("account", "pwd"));
        });
      }),
      floatingActionButton: FloatingActionButton(onPressed: () {
        /// 发送一个事件到逻辑层，并把参数带进去
        print("第一步：发送一个事件到逻辑层");
        context.read<HomeBloc>().add(LoginEvent("account", "pwd"));
      }),
    );
  }

  @override
  HomeBloc createBloc() {
    return HomeBloc(const HomeRepository());
  }
}

注意：下面这句代码一定要在BlocConsumer等Bloc相关的widget控件中的上下文中才能执行。否则汇报找不到Error: Could not find the correct Provider<HomeBloc> above this HomePage Widget

context.read<HomeBloc>().add(LoginEvent("account", "pwd"));

示例demo代码

blocg官方文档地址