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

2022-04-13 本文已影响0人 dushiling

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

目录

地址

猜你喜欢

热点阅读