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

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

你可能感兴趣的:(flutter)