flutter使用状态管理—flutter_bloc

1.flutter_bloc

flutter_bloc 是一个状态管理的工具，是由 状态数据 和 触发更新 来实现的，如果需要一个组件数据改变了，另一个组件要发生改变，使用常规的方式就是组件一层层传递，结构会很复杂，维护也会比较困难，这时候可以使用 flutter_bloc ，很简洁的帮我们实现这个功能

2.首先下载 flutter_bloc插件

如果是用vscode开发的话，在根目录下的 pubspec.yaml 文件里的 dependencies 下写入下面的内容，注意 缩进 要统一

flutter_bloc: ^8.1.1

在按下 ctrl + s 会自动执行 pub get，也可以在 终端 输入 flutter pub get

3.使用

1.首先，定义一个维护数据的文件，里面放入需要的数据，例如：完成一个全局颜色配置的功能，这里 只有一个成员 themeColor 主题色

import 'package:flutter/material.dart';

class AppConfig {
  final Color themeColor;
  AppConfig({required this.themeColor, required this.locale});

  // 命名构造函数+初始化列表
  AppConfig.defaultColor()
      : themeColor = const Color(0xff3BBD5B),
	
  AppConfig copyWith(Color? color) {
    return AppConfig(themeColor: color ?? themeColor);
  }
}

2.定义一个执行更新的文件，switchThemeColor 是用来触发更新的事件，state 则是当前 Cubit 的状态，emit 是发送更改好的新状态，emit 只能在 Cubit 中使用

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

class AppConfigBloc extends Cubit<AppConfig> {
  AppConfigBloc({required AppConfig appConfig}) : super(appConfig);

  void switchThemeColor(Color color) {
    if (color != state.themeColor) {
      emit(state.copyWith(color: color));
    }
  }
}

3.在项目入口中，使用 BlocProvider 进行包裹，将数据存储在最上层的节点，子节点可以通过 上下文 进行访问，AppConfig.defaultColor 是设置默认 颜色状态

void main() {
  runApp(
    BlocProvider<AppConfigBloc>(
      create: (context) => AppConfigBloc(
        appConfig: AppConfig.defaultColor(),
      ),
      child: const Home(),
    ),
  );
}

4.在 Home 中，build 返回的内容要使用 BlocBuilder 进行包裹，接收两个泛型，一个是 触发更新 的文件，一个是 状态数据 的文件，在 BlocBuilder 中有个 builder 函数，状态更新 后就会对应的更新

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AppConfigBloc, AppConfig>(
      builder: (_, state) => MaterialApp(
        debugShowCheckedModeBanner: false,
        home: const HomePage(),
        theme: ThemeData(
          // 使用当前状态的颜色作为主题色
          primaryColor: state.themeColor, 
        ),
      ),
    );
  }
}

5.在需要修改 主题色 的组件中，执行 BlocProvider.of(context) 来进行更新状态。

BlocProvider.of<AppConfigBloc>(context).switchThemeColor(newColor);