Flutter_bloc

今天重点讲一下bloc ，百度一下 有关这方面的知识比较少，毕竟flutter刚刚出来半年多，我的项目里管理方式是用bloc的，也有其它的管理方式，主要看个人理解以及喜好，bloc 可以本地管理和全局管理，加上能数据UI隔离，方便后期维护，是一个不错的选择

flutter_bloc 是一个bloc第三方库，这个库很方便的让你集成bloc模式，这个库结合了RXDart,先了解一下bloc 的模式吧

1，widget 触发event 事件 

2，bloc 接收event 事件并作出逻辑处理

3 ，并把逻辑处理结果给返回出来 

4，UI展示数据

其实它有点像mvvm   ，Event只是出发事件，并不能传值，bloc 接收这个event，根据event去找到具体的方法去处理逻辑，之后把结果返回，如果再不明白，我举个例子，我去饭店吃饭去告诉老板点一个大盘鸡（这个是event），老板根据菜名找到具体的厨师（sink），厨师做好大盘鸡（这是逻辑处理）之后告诉老板做好（state）老板把菜端上来（UI跟数据改变）

flutter_bloc 提供几个api  根据这几个API 就可以快速搭建bloc

   BlocBuilder    

   BlocProvider   

   BlocProviderTree  

   BlocListener  

   BlocListenerTree 

BlocBuilder

有三个属性 bloc  condition  builder

BlocBuilder(

bloc: ,这个添加bloc dart

condition: (previousState, currentState){ return true;},//可选默认返回true

builder: (BuildContext context, List state) {}state 返回数据

)。

BlocProvider

这个可以管理全局变量

BlocProvider(

bloc:,这个添加bloc dart 把这个bloc 传递其它字界面使用

child:LogIn(),子类

)

子widget 通过BlocProvider.of(context) 获取这个bloc

 如果涉及到push 可以通过这种模式传递

Navigator.push(context, new MaterialPageRoute(

builder: (Context)=>BlocProvider(

bloc:LogBloc(),

child:HomePage1(),

)));

BlocProviderTree

可以管理多个状态

一个widget 涉及多个state 可以用它管理

BlocProviderTree(

  blocProviders: [

    BlocProvider(bloc: BlocA()),

    BlocProvider(bloc: BlocB()),

    BlocProvider(bloc: BlocC()),

  ],

  child: ChildA(),

)

介绍一下实践

 做一个请求数据，拿到数据并展示UI

创建几个widget。ceshiBlocName   CeshiEvent  ，CeshiModel  ， CeShiState

CeshiEvent

负责触发逻辑处理

import 'ceshimodel.dart';

abstract class CeShiState{}

class CeshiSateNullInstallextends CeShiState{}

class CeshiStateDataextends CeShiState{

final Listarry;

    CeshiStateData({this.arry});

    CeshiStateDatacopyWith({

       List arry,

    }) {

     return CeshiStateData(

      arry: arry ??this.arry,

      );

    }

}

CeshiModel

数据模型

class CeshiModel{

final Stringtitle;

  final Stringsource;

  final intreplyCount;

  final Stringtas;

  final Stringboardid;

  final Stringimgsrc;

  final Listimgnewextra;

  CeshiModel({this.title,this.source,this.replyCount,this.tas,this.boardid, this.imgsrc, this.imgnewextra});

}

ceshiBlocName

bloc 处理

Bloc state可以对象，也可以是数组或者其它

CeshiEvent 是event

List 返回数据

class ceshiBlocNameextends Bloc>{

int_index=0;

  Listarry=new List();

  @override

  // TODO: implement initialState

  Listget initialState =>new List();//初始化结果

  @override

  Stream>mapEventToState(CeshiEvent event)async*{//数据处理 必须在这里面处理逻辑

event 触发事件

// TODO: implement mapEventToState

    if(eventis CeshiLodale){//判断事件并返回处理结果

final posts =await _fetchPosts(_index, 20);

      yield  posts;//yield 返回数据

    }

}

void ceshiDispachNull(){

dispatch(CeshiIntall());

  }

void ceshiDispach(){

dispatch(CeshiLodale());

  }

void ceshiDispach1(){

print('1111111111');

    dispatch(CeshiLodale1());

  }

Future>_fetchPosts(int startIndex, int limit)async {//请求数据

var tip=await NetUtil().request('${Url.listStr}offset=${startIndex}&size=${limit}&fn=2&spestr=reader_expert_1');

    List tipArry=tip['tid'];

    return tipArry.map((rawPost) {

return CeshiModel(

title:rawPost['title'],

        replyCount:rawPost['replyCount'],

        tas:'124' ,

        source: rawPost['source'],

        boardid: rawPost['boardid'],

        imgsrc: rawPost['imgsrc'],

        imgnewextra: rawPost['imgnewextra'],

      );

    }).toList();

  }

}

主Main里面

final ceshiBlocName_ceshiBloc=ceshiBlocName();

Widgetbuild(BuildContext context) {

return Scaffold(

    appBar:AppBar(

          title:Text('1123'),

    ),

    body:BlocBuilder(

    bloc:_ceshiBloc,//根据具体bloc 处理数据

   condition: (previousState, currentState){

return true;

    },

  builder: (BuildContext context, List state) {

//state 返回的数据

return  widget;

 }

);

到这里已经介绍完了，bloc 模式就是这种创建方式，通过例子可以看到数据与UI已经隔离，方便后期维护，大大节约维护成本，跟大家留一个小作业还有两个没有讲，大家可以自己去查查，