亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

flutter?Bloc?實現(xiàn)原理示例解析

 更新時間:2022年11月15日 08:44:47   作者:李小轟_Rex  
這篇文章主要為大家介紹了flutter?Bloc實現(xiàn)原理示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

序言

flutter開發(fā)中,我們使用 bloc 框架,基于狀態(tài)變更進行響應(yīng)式開發(fā)。本篇文章,小轟將 bloc 核心業(yè)務(wù)塊進行拆解簡化,聊一聊它的實現(xiàn)思想,bloc 核心能力分為如下兩點:

  • 添加事件 event,將 '事件流' 轉(zhuǎn)換為 '狀態(tài)流' state
  • 監(jiān)聽 bloc 流,每次 state 狀態(tài)變更,通知 widget 更新

下面,用自定義Bloc的方式,來給大家講解一下Bloc的原理構(gòu)造

1. 事件流 > 狀態(tài)流 (中轉(zhuǎn))

首先,我們將bloc代碼簡化,我們來看看bloc如何將事件流轉(zhuǎn)換為狀態(tài)流。簡化代碼如下:

import 'dart:async';
abstract class ACubit<State> {
  StreamController<State> _controller = StreamController<State>.broadcast();
  State _state;
  State get state => _state;
  ACubit(this._state);
  ///發(fā)送State狀態(tài)到流里面
  void emit(State state) {
    if (_controller.isClosed) return;
    if (state == _state) return;
    _state = state;
    _controller.add(_state);
  }
  ///提供方法外部監(jiān)聽State
  StreamSubscription<State> listen(
    void Function(State state) onData, {
    Function onError,
    void Function() onDone,
    bool cancelOnError,
  }) {
    return _controller.stream.listen(
      onData,
      onError: onError,
      onDone: onDone,
      cancelOnError: cancelOnError,
    );
  }
  Future<void> close() {
    return _controller.close();
  }
}

ACubit提供最基礎(chǔ)的能力。提供listen方法給外部監(jiān)聽 'State' 變更;emit方法用來響應(yīng)state狀態(tài)變更。

abstract class ABloc<Event, State> extends ACubit<State> {
  final _eventController = StreamController<Event>.broadcast();
  ABloc(State initState) : super(initState) {
    _bindEventToState();
  }
  ///發(fā)送事件
  void add(Event event) {
    if (_eventController.isClosed) return;
    _eventController.add(event);
  }
  ///需上層實現(xiàn) (根據(jù)event轉(zhuǎn)成state)
  Stream<State> mapEventToState(Event event);
  ///將事件流(event)轉(zhuǎn)換成狀態(tài)流(state)
  _bindEventToState() {
    _eventController.stream
        // asyncExpand 將流內(nèi)容進行類型轉(zhuǎn)換,結(jié)果還是流
        .asyncExpand((event) => mapEventToState(event))
        .listen((nextState) {
      ///將nextState與當(dāng)前state進行比對,比對成功后放入流中
      emit(nextState);
    });
  }
}

ABloc 是我們直接使用的基類。在構(gòu)造函數(shù)中調(diào)用了_bindEventToState將事件流轉(zhuǎn)換為狀態(tài)流。

2. 使用 BlocBuilder 實時監(jiān)聽狀態(tài)變更, 如何實現(xiàn)的呢?

小轟做了一個簡化版的原理講解:

import 'package:flutter/material.dart';
import 'a_bloc.dart';
class BlocBuilder<T extends ACubit<S>, S> extends StatefulWidget {
  final T cubit;
  final Widget Function(BuildContext context, S state) builder;
  const BlocBuilder({
    Key key,
    @required this.cubit,
    @required this.builder,
  }) : super(key: key);
  @override
  _BlocBuilderState<S> createState() => _BlocBuilderState<S>();
}
class _BlocBuilderState<S> extends State<BlocBuilder> {
  void _update() {
    setState(() {});
  }
  @override
  void initState() {
    ///監(jiān)聽state狀態(tài)變更
    widget.cubit?.listen((_) {
      _update();
    });
    super.initState();
  }
  @override
  void dispose() {
    widget.cubit?.close();
    super.dispose();
  }
  @override
  Widget build(BuildContext context){
    return widget.builder(
      context,
      widget.cubit.state,
    );
  }
}

封裝 BlocBuilder

  • 構(gòu)造函數(shù)中傳入自定義的 bloc (繼承ABloc),builder 傳參用于獲取每次 state 變更通知。
  • initState初始化方法中對cubit進行狀態(tài)監(jiān)聽,每次狀態(tài)變更直接調(diào)用setState方法進行頁面更新

調(diào)用示例如下:

return BlocBuilder<CountBloc, CountState>(
      cubit: CountBloc(CountState(1)),
      builder: (context, state) {
       return Container(...省略業(yè)務(wù)代碼)
      },
    )

總結(jié)

bloc 庫中引用了provider 等三方庫?;?code>InheritedWidget實現(xiàn)了數(shù)據(jù)共享能力。本篇文章,小轟只為演示Bloc核心的處理思想。詳細請查閱Bloc源碼。

擴展

InheritedProvider 實現(xiàn)數(shù)據(jù)共享 Bloc同時add兩次只響應(yīng)一次問題處理

以上就是flutter Bloc 實現(xiàn)原理示例解析的詳細內(nèi)容,更多關(guān)于flutter Bloc 實現(xiàn)原理的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論