今天重點講一下bloc 蓬豁，百度一下 有關(guān)這方面的知識比較少氢妈，畢竟flutter剛剛出來半年多，我的項目里管理方式是用bloc的嚷掠，也有其它的管理方式捏检，主要看個人理解以及喜好，bloc 可以本地管理和全局管理不皆，加上能數(shù)據(jù)UI隔離贯城，方便后期維護，是一個不錯的選擇
flutter_bloc 是一個bloc第三方庫霹娄，這個庫很方便的讓你集成bloc模式能犯，這個庫結(jié)合了RXDart,先了解一下bloc 的模式吧
1，widget 觸發(fā)event 事件?
2犬耻，bloc 接收event 事件并作出邏輯處理
3 踩晶，并把邏輯處理結(jié)果給返回出來?
4，UI展示數(shù)據(jù)
其實它有點像mvvm ? 枕磁，Event只是出發(fā)事件渡蜻，并不能傳值，bloc 接收這個event计济，根據(jù)event去找到具體的方法去處理邏輯茸苇，之后把結(jié)果返回，如果再不明白沦寂，我舉個例子学密，我去飯店吃飯去告訴老板點一個大盤雞（這個是event），老板根據(jù)菜名找到具體的廚師（sink）凑队，廚師做好大盤雞（這是邏輯處理）之后告訴老板做好（state）老板把菜端上來（UI跟數(shù)據(jù)改變）
flutter_bloc 提供幾個api ?根據(jù)這幾個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 返回數(shù)據(jù)
)则果。
BlocProvider
這個可以管理全局變量
BlocProvider(
bloc:,這個添加bloc dart 把這個bloc 傳遞其它字界面使用
child:LogIn(),子類
)
子widget 通過BlocProvider.of<LogBloc>(context) 獲取這個bloc
?如果涉及到push 可以通過這種模式傳遞
Navigator.push(context, new MaterialPageRoute(
builder: (Context)=>BlocProvider(
bloc:LogBloc(),
child:HomePage1(),
)));
BlocProviderTree
可以管理多個狀態(tài)
一個widget 涉及多個state 可以用它管理
BlocProviderTree(
? blocProviders: [
? ? BlocProvider<BlocA>(bloc: BlocA()),
? ? BlocProvider<BlocB>(bloc: BlocB()),
? ? BlocProvider<BlocC>(bloc: BlocC()),
? ],
? child: ChildA(),
)
介紹一下實踐
?做一個請求數(shù)據(jù)，拿到數(shù)據(jù)并展示UI
創(chuàng)建幾個widget漩氨。ceshiBlocName ??CeshiEvent ?西壮，CeshiModel ?，?CeShiState
CeshiEvent
負責觸發(fā)邏輯處理
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
數(shù)據(jù)模型
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<event,state> state可以對象叫惊，也可以是數(shù)組或者其它
CeshiEvent 是event
List<CeshiModel> 返回數(shù)據(jù)
class ceshiBlocNameextends Bloc<CeshiEvent,List<CeshiModel>>{
int_index=0;
? Listarry=new List();
? @override
? // TODO: implement initialState
? Listget initialState =>new List();//初始化結(jié)果
? @override
? Stream<List<CeshiModel>>mapEventToState(CeshiEvent event)async*{//數(shù)據(jù)處理 必須在這里面處理邏輯
event 觸發(fā)事件
// TODO: implement mapEventToState
? ? if(eventis CeshiLodale){//判斷事件并返回處理結(jié)果
final posts =await _fetchPosts(_index, 20);
? ? ? yield? posts;//yield 返回數(shù)據(jù)
? ? }
}
void ceshiDispachNull(){
dispatch(CeshiIntall());
? }
void ceshiDispach(){
dispatch(CeshiLodale());
? }
void ceshiDispach1(){
print('1111111111');
? ? dispatch(CeshiLodale1());
? }
Future>_fetchPosts(int startIndex, int limit)async {//請求數(shù)據(jù)
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,//根據(jù)具體bloc 處理數(shù)據(jù)
? ?condition: (previousState, currentState){
return true;
? ? },
? builder: (BuildContext context, List state) {
//state 返回的數(shù)據(jù)
return ?widget;
?}
);
