Provider、Bloc、GetX的使用区别和原理

作者: dushiling | 来源:发表于2022-04-13 18:00 被阅读0次

1. 使用区别

以最简单的 计数器 为例, 来区分三者的写法差异

说明：范例都统一创建了state文件，为了适用复杂逻辑，实际应用中，页面或逻辑简单可在模板创建时选择简易模式。

以下三种可以依次浅记为"notifyListeners()"、"Event/cubit"、".obs"来大致区分。

Provider

1.导入

provider: ^6.0.2

2.安装插件

安装插件1.png
3.使用

image.png

模板.png	生成代码.png

View：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart';

class CounterPage extends StatelessWidget {
 TextEditingController ttt=TextEditingController();

 @override
 Widget build(BuildContext context) {
   return ChangeNotifierProvider(
     create: (BuildContext context) => CounterProvider(),
     builder: (context, child) => _buildPage(context),
   );
 }

 Widget _buildPage(BuildContext context) {
   final provider = context.read<CounterProvider>();
   final state = provider.state;


   return Scaffold(
     appBar: AppBar(title: Text('Provider范例')),
     body: Center(
       child: Consumer<CounterProvider>(
         builder: (context, provider, child) {
           return Text(
             '点击了 ${state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => provider.increment(),//按钮事件
       child: Icon(Icons.add),
     ),
   );
 }
}

Provider：

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

class CounterProvider extends ChangeNotifier {
 final state = CounterState();

 void increment() {
   state.count++;
   notifyListeners();//通知更新
 }
}

State：

class CounterState {

 late int count;

 CounterState() {
   // init some variables
   count = 0; //初始化
 }
}

Bloc

bloc 8.0 之前

1.导入

flutter_bloc: ^6.1.1 #状态管理框架
equatable: ^1.2.3 #增强组件相等性判断

2.安装插件

官方---安装插件2-1.png
或者：

推荐使用---安装插件2-2.png

3.使用

$\color{LightSkyBlue}{推荐安装使用}$ Flutter Bloc 插件生成代码，它是作者基于官方的Bloc优化过的插件，自动生成view文件，并优化了代码结构。

< bloc > :

bloc8.0- bloc.png	代码生成.png

view：

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

import 'counter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return BlocProvider(
     create: (BuildContext context) => CounterBloc()..add(InitEvent()),//添加初始化事件
     child: Builder(builder: (context) => _buildPage(context)),
   );
 }

 Widget _buildPage(BuildContext context) {
   final bloc = BlocProvider.of<CounterBloc>(context);

   return Scaffold(
     appBar: AppBar(title: Text('Bloc-bloc-8.0-范例')),
     body: Center(
      //BlocBuilder: 颗粒化刷新
       child: BlocBuilder<CounterBloc, CounterState>(
         builder: (context, state) {
           return Text(
             '点击了 ${bloc.state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => bloc.add(CounterIncrementEvent()),//添加按钮点击事件
       child: Icon(Icons.add),
     ),
   );
 }
}

bloc ：

import 'package:bloc/bloc.dart';

import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
 CounterBloc() : super(CounterState().init());

 @override
 Stream<CounterState> mapEventToState(CounterEvent event) async* {
   if (event is InitEvent) {
     yield await init();
   }else if(event is CounterIncrementEvent){
     yield CountIncrement();
   }
 }

 Future<CounterState> init() async {
   return state.clone();
 }


 CounterState  CountIncrement(){
   return state.clone()..count=state.count+1;
 }

}

event ：

abstract class CounterEvent {}

class InitEvent extends CounterEvent {}

class CounterIncrementEvent extends CounterEvent {

}

state：

class CounterState {
 int count;

 CounterState init() {
   return CounterState()
   ..count=0;
 }

 CounterState clone() {
   return CounterState()
   ..counter = count;
 }
}

< cubit > :

bloc8.0- cubit .png	生成代码.png

view:

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

class Counter2Page extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return BlocProvider(
     create: (BuildContext context) => Counter2Cubit(),
     child: Builder(builder: (context) => _buildPage(context)),
   );
 }

 Widget _buildPage(BuildContext context) {
   final cubit = BlocProvider.of<Counter2Cubit>(context);

   return Scaffold(
     appBar: AppBar(title: Text('Bloc-cubit-8.0-范例')),
     body: Center(
       child: BlocBuilder<Counter2Cubit, Counter2State>(
         builder: (context, state) {
           return Text(
             '点击了 ${cubit.state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => cubit.increment(),//按钮事件
       child: Icon(Icons.add),
     ),
   );
 }
}

cubit :

import 'package:bloc/bloc.dart';
import 'counter2_state.dart';

class Counter2Cubit extends Cubit<Counter2State> {
 Counter2Cubit() : super(Counter2State().init());

 // emit：发流刷新
 void increment() => emit(
     state.clone()..count = ++state.count
 );
}

State：

class Counter2State {

 late int count;

 Counter2State init() {
   return Counter2State()
     ..count = 0;
 }

 Counter2State clone() {
   return Counter2State()
     ..count = count;
 }
}

bloc 8.0+

bloc8.0+的版本，对比之前的写法简直是破坏式的改变，你如果升级到bloc 8.0及其以上的版本，之前写的bloc模式写法已经完全不兼容了，mapEventToState方法直接被移除了，一运行项目，bloc内部也会给出报错，需要你手动去注册处理器。

虽然是破坏式的改变写法，但是新写法是非常的优雅，彻底改变了以前的mapEventToState方法中的各种判断Event。

1.导入

flutter_bloc: ^8.0.1

2.安装插件

安装插件3.png

3.使用

image.png

< bloc > :

模板.png	代码生成.png

view ：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return BlocProvider(
     create: (BuildContext context) => CounterBloc()..add(InitEvent()),
     child: Builder(builder: (context) => _buildPage(context)),
   );
 }

 Widget _buildPage(BuildContext context) {
   final bloc = BlocProvider.of<CounterBloc>(context);

   return Scaffold(
     appBar: AppBar(title: Text('Bloc-bloc-8.0+范例')),
     body: Center(
       child: BlocBuilder<CounterBloc, CounterState>(
         builder: (context, state) {
           return Text(
             '点击了 ${bloc.state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => bloc.add(CounterIncrementEvent()),//按钮添加点击事件
       child: Icon(Icons.add),
     ),
   );
 }
}

bloc ：

import 'package:bloc/bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
 CounterBloc() : super(CounterState().init()) {
   //页面初始化时刻
   on<InitEvent>(_init);
   //计数器自增
   on<CounterIncrementEvent>(_increment);
 }

 void _init(InitEvent event, Emitter<CounterState> emit) async {
   //处理一些初始化操作,然后刷新界面
   emit(state.clone());
 }

 ///自增
 void _increment(CounterIncrementEvent event, Emitter<CounterState> emit) {
   state.count++;
   emit(state.clone());
 }
}

event :

abstract class CounterEvent {}

class InitEvent extends CounterEvent {}

class CounterIncrementEvent extends CounterEvent {}

state :

class CounterState {
 late int count;

 CounterState init() {
   return CounterState()
     ..count = 0;
 }

 CounterState clone() {
   return CounterState()
     ..count = count;
 }
}

< cubit > :

模板.png	生成代码.png

代码跟bloc8.0之前的相同，就不贴出来了。

GetX

1.导入

get: ^4.6.1

2.安装插件

安装插件4.png
3.使用

image.png

模板.png	生成代码.png

View：

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

import 'counter_logic.dart';

class CounterPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final logic = Get.put(CounterLogic());
   final state = Get.find<CounterLogic>().state;

   return Scaffold(

       appBar: AppBar(title: Text('计数器')),
       // 使用Obx(()=>每当改变计数时，就更新Text()。
       body: Obx(() {
         return Center(child: Text('点击了 ${state.count} 次',style: TextStyle(fontSize: 30),));
       }),
       floatingActionButton: FloatingActionButton(
           child: Icon(Icons.add), onPressed: logic.increment));//按钮事件
 }
}

Logic:

import 'package:get/get.dart';
import 'counter_state.dart';

class CounterLogic extends GetxController {
 final CounterState state = CounterState();


 void increment() {
   state.count++;
 }

}

State:

import 'package:get/get.dart';

class CounterState {

  var count;

  CounterState() {
    ///Initialize variables
     count = 0.obs; //初始化   定义为Rx变量
  }
}

2. 原理

Provider

Provider状态框架，对系统资源占用极低，它仅仅只使用了ChangeNotifier，这仅仅是最基础的Callback回调，这会占用多少资源？刷新逻辑全是调用Flutte的framework层自带的那些api（获取InheritedElement的内部操作很简单）。。。所以完全不用担心，他会占用多少资源，几乎忽略不计！

前置知识.png

刷新机制.png

总流程.png

涉及ChangeNotifierProvider、ListenableProvider、InheritedProvider、_InheritedProviderScope、_InheritedProviderScopeElement 这五个关键类。

判定.png

总流程.png

添加监听.png

监听的流转主要涉及ChangeNotifierProvider、ListenableProvider、InheritedProvider 这三个类。

流转示意图.png

流程图.png

1.png

ListenableProvider .png

_InheritedProviderScopeElement .png

2.png

刷新流程.png

以上原理的详细讲解 及其它比如 BuildContext、Provider.of()、MultiProvider、Consumer、Selector的分析，请查看原作者的文章：《 Flutter Provider的另一面（万字图文+插件）》。

Bloc

Bloc.png

3.png

4.png

5.png

作用.png

BlocProvider.png

6.png

7.png

8.png

总结.png

以上原理的详细讲解 , 请查看原作者的文章：《 Flutter Bloc背后的思想，一篇纠结的文章》。

此外，更多使用请点击下方链接查看：
flutter_bloc使用解析---骚年，你还在手搭bloc吗！

GetX

1. 前置知识

8.png

优势.png

2. 依赖注入

9.png

依赖注入前.png

依赖注入后.png

瞬间就想到了中介者模式
这也是控制反转的思想（创建对象的控制权本来在自己手上，现在交给了第三方）

3. GetBuilder刷新机制

9.png

GetBuilder .png

总结：

刷新机制.png

4. Obx刷新机制

10.png

Rx变量.png

添加监听.png

监听转移.png

总结.png

以上原理的详细讲解 , 请查看原作者的文章：《 Flutter GetX深度剖析 | 我们终将走出自己的路（万字图文）》。

此外，更多使用请点击下方链接查看：
GetX插件的详细使用
 Flutter GetX使用---简洁的魅力！
GetX的README.zh—使用说明

3. Demo

综合以上的范例和文章中涉及的三篇原作者文章中的" $\color{brown}{手搓一个状态管理框架}$ "，整合了三个Demo，分别是：provider_demo、bloc_demo (bloc_demo1: 8.0 前、bloc _demo2: 8.0后)、getx_demo。

其自定义状态管理框架分别为EasyP、EasyC、EasyX, 其效果可在main中使用use目录下的view来查看。 Demo目录如下👇🏻：

如果你的公司，不想使用第三方状态管理框架，完全可以将下面自定义状态管理框架拿来用，在已有骨架的基础上填充血肉。

demo目录.png

main.png

三个状态管理插件的的 详细使用 还请查阅其官方API。

地址

Demo: flutter_state_manager_demo

Provider、Bloc、GetX的使用区别和原理

1. 使用区别

Provider

Bloc

GetX

2. 原理

Provider

Bloc

GetX

1. 前置知识

2. 依赖注入

3. GetBuilder刷新机制

4. Obx刷新机制

3. Demo

目录

地址

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter

Flutter

Flutter

Flutter