Flutter 詳解(七动壤、深入了解繪制原理)

Future

Future有三種狀態(tài)未完成完成帶有值淮逻、完成帶有異常琼懊,使用Future可以簡化事件任務(wù)。 假如你有一個按鈕爬早,點擊之后開始下載圖片哼丈,首先事件循環(huán)機制會處理你的點擊事件,然后開始下載圖片筛严,當(dāng)下載完成削祈,你可以使用then來注冊回調(diào),然后獲取到圖片并顯示出來脑漫。

通常我們不會直接創(chuàng)建,網(wǎng)絡(luò)下載圖片會返回一個Future,文件I/O會返回一個Future,那我們怎么創(chuàng)建一個呢咙崎?只需要關(guān)鍵字async就表示該函數(shù)異步執(zhí)行优幸,返回類型是Future<T>

Future<String> getStr()async{
  var str = HttpRequest.getString('www.fgyong.cn');
  return str;
}

使用http請求地址www.fgyong.cn獲取數(shù)據(jù)褪猛,然后返回网杆。

如何接收文本呢?

其實很簡單伊滋,只需要使用await關(guān)鍵字即可碳却,用來注冊then回調(diào)。

main(List<String> args) async {
  String string = await getStr();
  print(string);
}

等同于:

main(List<String> args) async {
  getStr().then((value) {
    print(value);
  });
}

官方比較推薦前者笑旺,因為前者看起來很像同步函數(shù)昼浦,少了層層嵌套,方便開發(fā)者理解代碼筒主。
網(wǎng)絡(luò)下載想延遲動畫隱藏時間关噪,可以使用Future.delayed()鸟蟹。

await Future.delayed(Duration(seconds: 2), () {
hideAnimation();
});

如果已經(jīng)帶有值的想異步去執(zhí)行,那么可以使用Future.value()

Stream

dart:async庫包含對許多Dart API很重要的兩種類型:StreamFuture使兔。如果Future表示單個計算的結(jié)果建钥,則流是一系列結(jié)果。您偵聽流以獲取有關(guān)結(jié)果(數(shù)據(jù)和錯誤)以及流關(guān)閉的通知虐沥。您還可以在收聽流時暫停播放或在流完成之前停止收聽熊经。

如何使用Stream

流可以通過多種方式創(chuàng)建,后續(xù)在仔細(xì)講解欲险,但是它們都可以以相同的方式使用:異步for循環(huán)(通常僅稱為await for)遍歷流的事件镐依,如for循環(huán)迭代遍歷。例如:

Future<int> sumStream(Stream<int> stream) async {
  var sum = 0;
  await for (var value in stream) {
    sum += value;
  }
  return sum;
}

此代碼僅接收整數(shù)事件流中的每個事件盯荤,將它們相加馋吗,然后返回(和)其和。當(dāng)循環(huán)主體結(jié)束時秋秤,函數(shù)將暫停宏粤,直到下一個事件到達(dá)或流完成為止。 該函數(shù)標(biāo)記有async關(guān)鍵字灼卢,在使用await for循環(huán)時需要此關(guān)鍵字绍哎。 以下示例通過使用async *函數(shù)生成簡單的整數(shù)流來測試前面的代碼:

import 'dart:async';

Future<int> sumStream(Stream<int> stream) async {
  var sum = 0;
  await for (var value in stream) {
    sum += value;
  }
  return sum;
}

Stream<int> countStream(int to) async* {
  for (int i = 1; i <= to; i++) {
    yield i;
  }
}

main() async {
  var stream = countStream(10);
  var sum = await sumStream(stream);
  print(sum); // 55
}

當(dāng)流中沒有更多事件時,就完成流鞋真,并通知接收事件的代碼崇堰,就像通知新事件到來一樣。使用await for循環(huán)讀取事件時涩咖,流完成后循環(huán)停止海诲。 在某些情況下,流完成之前會發(fā)生錯誤檩互;可能是網(wǎng)絡(luò)從遠(yuǎn)程服務(wù)器上獲取文件時發(fā)生故障特幔,或者創(chuàng)建事件的代碼存在錯誤,但是有人需要了解它闸昨。 流還可以傳遞錯誤事件蚯斯,就像傳遞數(shù)據(jù)事件一樣。大多數(shù)流將在出現(xiàn)第一個錯誤后停止饵较,但有可能傳遞多個錯誤的流以及在發(fā)生錯誤事件后傳遞更多數(shù)據(jù)的流拍嵌。在本文檔中,我們僅討論最多產(chǎn)生一個錯誤的流循诉。 當(dāng)使用await for讀取流時横辆,循環(huán)語句會引發(fā)錯誤。這也結(jié)束了循環(huán)打洼。您可以使用try-catch捕獲錯誤龄糊。以下示例在循環(huán)迭代器等于時引發(fā)錯誤 4:

import 'dart:async';

Future<int> sumStream(Stream<int> stream) async {
  var sum = 0;
  try {
    await for (var value in stream) {
      sum += value;
    }
  } catch (e) {
    return -1;
  }
  return sum;
}

Stream<int> countStream(int to) async* {
  for (int i = 1; i <= to; i++) {
    if (i == 4) {
      throw new Exception('Intentional exception');
    } else {
      yield i;
    }
  }
}

main() async {
  var stream = countStream(10);
  var sum = await sumStream(stream);
  print(sum); // -1
}

兩種Stream

單一訂閱流 最常見的流包含一系列事件逆粹,這些事件是較大整體的一部分。事件必須以正確的順序傳遞炫惩,并且不能丟失任何事件僻弹。這是您在讀取文件或接收Web請求時獲得的流。 這樣的流只能被收聽一次他嚷。稍后再次收聽可能意味著錯過了最初的事件蹋绽,然后其余部分毫無意義。當(dāng)您開始收聽時筋蓖,數(shù)據(jù)將被提取并以塊的形式提供卸耘。 廣播流 另一種流是針對可以一次處理的單個消息的。例如粘咖,這種流可用于瀏覽器中的鼠標(biāo)事件蚣抗。 您可以隨時開始收聽這樣的流,并且在收聽時會觸發(fā)事件瓮下。多個收聽者可以同時收聽翰铡,并且您可以在取消上一個訂閱之后稍后再次收聽。

Stream的方法

Future<T> get first;
Future<bool> get isEmpty;
Future<T> get last;
Future<int> get length;
Future<T> get single;
Future<bool> any(bool Function(T element) test);
Future<bool> contains(Object needle);
Future<E> drain<E>([E futureValue]);
Future<T> elementAt(int index);
Future<bool> every(bool Function(T element) test);
Future<T> firstWhere(bool Function(T element) test, {T Function() orElse});
Future<S> fold<S>(S initialValue, S Function(S previous, T element) combine);
Future forEach(void Function(T element) action);
Future<String> join([String separator = ""]);
Future<T> lastWhere(bool Function(T element) test, {T Function() orElse});
Future pipe(StreamConsumer<T> streamConsumer);
Future<T> reduce(T Function(T previous, T element) combine);
Future<T> singleWhere(bool Function(T element) test, {T Function() orElse});
Future<List<T>> toList();
Future<Set<T>> toSet();

這么多方法基本都可以使用await for來循環(huán)

Future<bool> contains(Object needle) async {
  await for (var event in this) {
    if (event == needle) return true;
  }
  return false;
}

Future forEach(void Function(T element) action) async {
  await for (var event in this) {
    action(event);
  }
}

Future<List<T>> toList() async {
  final result = <T>[];
  await this.forEach(result.add);
  return result;
}

Future<String> join([String separator = ""]) async =>
    (await this.toList()).join(separator);

修改Stream

Stream<R> cast<R>();
Stream<S> expand<S>(Iterable<S> Function(T element) convert);
Stream<S> map<S>(S Function(T event) convert);
Stream<T> skip(int count);
Stream<T> skipWhile(bool Function(T element) test);
Stream<T> take(int count);
Stream<T> takeWhile(bool Function(T element) test);
Stream<T> where(bool Function(T event) test);

這些基本都是使用閉包過濾流的內(nèi)容讽坏,當(dāng)然也可以轉(zhuǎn)換內(nèi)容锭魔。

監(jiān)聽Stream

最后是監(jiān)聽,當(dāng)流改變時會觸發(fā)監(jiān)聽listen()路呜,所有的流都可以被監(jiān)聽迷捧。

StreamSubscription<T> listen(void Function(T event) onData,
    {Function onError, void Function() onDone, bool cancelOnError});

創(chuàng)建自己的Stream

創(chuàng)建Stream大概有三種,如下所示:

  • 轉(zhuǎn)換Stram
  • 使用async*創(chuàng)建Stream
  • 使用StreamController創(chuàng)建

轉(zhuǎn)換Stram

經(jīng)常有些Stream包含的值不是我們想要的胀葱,那么就需要我們轉(zhuǎn)換一下了漠秋,例如我們把數(shù)字轉(zhuǎn)成字符串.

  Future<String> _toString() async {
    var s = await _stream().map((event) => event.toString()).join('|');
    return s;
  }

也可以轉(zhuǎn)成數(shù)組

 Future<List> _toList() async {
    var s = await _stream().toList();
    return s;
  }

使用async*創(chuàng)建Stream

創(chuàng)建新流的一種方法是使用異步生成器(async *)函數(shù)。在調(diào)用該函數(shù)時創(chuàng)建該流抵屿,并且在偵聽該流時該函數(shù)的主體開始運行膛堤。函數(shù)返回時,流關(guān)閉晌该。在函數(shù)返回之前,它可以使用yieldyield *語句在流上發(fā)出事件绿渣。

這是一個原始示例,該示例會定期發(fā)射數(shù)字:

Stream<int> timedCounter(Duration interval, [int maxCount]) async* {
  int i = 0;
  while (true) {
    await Future.delayed(interval);
    yield i++;
    if (i == maxCount) break;
  }
}

此函數(shù)返回一個Stream。當(dāng)收聽該流時猪腕,主體開始運行烙肺。它反復(fù)延遲請求的時間間隔,然后產(chǎn)生下一個數(shù)字淀散。如果忽略count參數(shù)右莱,則循環(huán)上沒有停止條件蚜锨,因此流永遠(yuǎn)輸出越來越大的數(shù)字-或直到偵聽器取消其訂閱為止。 當(dāng)偵聽器取消時(通過在listen()方法返回的StreamSubscription對象上調(diào)用cancel())慢蜓,則主體下一次到達(dá)yield語句時亚再,yield將充當(dāng)return語句。執(zhí)行所有封閉的finally塊晨抡,然后函數(shù)退出氛悬。如果函數(shù)嘗試在退出前產(chǎn)生一個值,則該操作將失敗并充當(dāng)返回值耘柱。 當(dāng)函數(shù)最終退出時如捅,由cancel()方法返回的Future完成。如果函數(shù)以錯誤退出调煎,則Future會以該錯誤結(jié)束镜遣;否則,它以null結(jié)束士袄。 另一個更有用的示例是一個轉(zhuǎn)換序列的函數(shù):

Stream<T> streamFromFutures<T>(Iterable<Future<T>> futures) async* {
  for (var future in futures) {
    var result = await future;
    yield result;
  }
}

使用yield*

使用yield*來調(diào)用其他的函數(shù)取下一個值悲关,當(dāng)不獲取的時候,則不運行窖剑。

  Stream<int> _stream() async* {
    if (_count < 10) {
      yield _count++;
      await Future.delayed(Duration(seconds: 1));
      sleep(Duration(seconds: 1));
      yield* _getDataFromServer();
    }
  }

yield*yield區(qū)別是后者直接返回一個固定的值坚洽,而前者返回是的是一個函數(shù)。前者多用于分流西土,把一個Stream<T>分為其他的Stream<R>Stream<E>讶舰。

使用StreamController創(chuàng)建stream

_streamController = StreamController();
// 監(jiān)聽
_streamController.stream.listen((event) { })
/// 添加數(shù)據(jù)
_streamController.add('data');

StreamControlelr的類圖如下所示,他們從SinkStreamSink都只是到導(dǎo)入接口需了,并無直接繼承關(guān)系跳昼,在抽象類方面按照功能解耦,最終由StreamController整合肋乍,負(fù)責(zé)添加的是StreamControlelr,負(fù)責(zé)監(jiān)聽的是Stream,最終在當(dāng)前的Zone中執(zhí)行回調(diào)Zone.runUnaryGuarded()鹅颊。Zone類似一個沙盒環(huán)境,在APP啟動的時候創(chuàng)建墓造。

image

原理

StreamController中初始化堪伍,直接調(diào)用了_SyncStreamController,具體功能全部在_SyncStreamController(同步)或_AsyncStreamController(異步)中實現(xiàn)觅闽。

factory StreamController(
  {void onListen(),
  void onPause(),
  void onResume(),
  onCancel(),
  bool sync: false}) {
return sync
    ? new _SyncStreamController<T>(onListen, onPause, onResume, onCancel)
    : new _AsyncStreamController<T>(onListen, onPause, onResume, onCancel);
}

最終在_BufferingStreamSubscription類中帝雇,實現(xiàn)了
onDoneonError函數(shù),他們分別在類實例化的時候注冊回調(diào)函數(shù)蛉拙。

void onData(void handleData(T event)) {
  handleData ??= _nullDataHandler;//默認(rèn)值
  _onData = _zone.registerUnaryCallback<dynamic, T>(handleData);
}
void onDone(void handleDone()) {
  handleDone ??= _nullDoneHandler;
  _onDone = _zone.registerCallback(handleDone);
}

那么listener函數(shù)是在何時添加的呢尸闸?
在獲取stream_ControllerStream(),最終listener函數(shù)是_StreamImpl extends Steam中實現(xiàn)的,代碼如下:

StreamSubscription<T> listen(void onData(T data),
      {Function onError, void onDone(), bool cancelOnError}) {
    cancelOnError = identical(true, cancelOnError);
    StreamSubscription<T> subscription =
        _createSubscription(onData, onError, onDone, cancelOnError);
    _onListen(subscription);
    return subscription;
  }
  
/// 創(chuàng)建一個訂閱者
StreamSubscription<T> _createSubscription(void onData(T data),
    Function onError, void onDone(), bool cancelOnError) {
  return new _BufferingStreamSubscription<T>(
      onData, onError, onDone, cancelOnError);
}

最終監(jiān)聽是執(zhí)行的_BufferingStreamSubscription_onData(void HandleData(T event)),這里是使用了_zone.registerUnaryCallback來注冊回調(diào)函數(shù)吮廉,否則在調(diào)用的時候會報錯苞尝。

void onData(void handleData(T event)) {
  handleData ??= _nullDataHandler;
  _onData = _zone.registerUnaryCallback<dynamic, T>(handleData);
}

stream.add()函數(shù)執(zhí)行了_add(),源碼如下

void _add(T data) {
  assert(!_isClosed);
  if (_isCanceled) return;
  if (_canFire) {
    _sendData(data);
  } else {
    _addPending(new _DelayedData<T>(data));
  }
}

當(dāng)狀態(tài)已關(guān)閉,直接斷言宦芦,當(dāng)狀態(tài)已取消宙址,返回操作,當(dāng)可以發(fā)送數(shù)據(jù)踪旷,則執(zhí)行_sendData()函數(shù)曼氛,該函數(shù)才是最終發(fā)送數(shù)據(jù),執(zhí)行listen操作的關(guān)鍵函數(shù)令野,源碼如下:

void _sendData(T data) {
  assert(!_isCanceled);
  assert(!_isPaused);
  assert(!_inCallback);
  bool wasInputPaused = _isInputPaused;
  _state |= _STATE_IN_CALLBACK;//取出來第六位
  _zone.runUnaryGuarded(_onData, data);
  _state &= ~_STATE_IN_CALLBACK;// 舍棄第六位
  _checkState(wasInputPaused);
}

通過final Zone _zone = Zone.current;獲取當(dāng)前的Zone來執(zhí)行已經(jīng)注冊的回調(diào)_zone.runUnaryGuarded(_onData, data),執(zhí)行完畢,使用_state&=~_STATE_IN_CALLBACK來保存當(dāng)前狀態(tài)舀患,使用&=~舍棄第6位數(shù)字,_STATE_IN_CALLBACK值為32气破,那么低第六位是1聊浅,~_STATE_IN_CALLBACK,除了第六位,剩下的都是1现使,然后&=來取出來其他的位數(shù)值保存下來低匙。

然后在_checkState(wasInutPaused)來確定在執(zhí)行callback中間并無狀態(tài)改變。

那么再執(zhí)行完畢_sendDone()的時候也是如此碳锈,首先判斷是否已經(jīng)取消顽冶,沒取消的話,執(zhí)行_onDone回調(diào)售碳。

 void _sendDone() {
    assert(!_isCanceled);
    assert(!_isPaused);
    assert(!_inCallback);

    void sendDone() {
      // If the subscription has been canceled while waiting for the cancel
      // future to finish we must not report the done event.
      if (!_waitsForCancel) return;
      _state |= (_STATE_CANCELED | _STATE_CLOSED | _STATE_IN_CALLBACK);
      _zone.runGuarded(_onDone);
      _state &= ~_STATE_IN_CALLBACK;
    }

    _cancel();
    _state |= _STATE_WAIT_FOR_CANCEL;
    if (_cancelFuture != null &&
        !identical(_cancelFuture, Future._nullFuture)) {
      _cancelFuture.whenComplete(sendDone);
    } else {
      sendDone();
    }
  }

事件流就是在前期使用Zone注冊强重,在add的時候使用Zone調(diào)用已經(jīng)注冊好的回調(diào),廣播是循環(huán)調(diào)用

關(guān)鍵函數(shù):

/// 注冊回調(diào)
_zone.registerUnaryCallback<dynamic, T>(handleData)

/// 注冊不帶參數(shù)的回調(diào)

_zone.registerCallback(R callback())

/// 執(zhí)行 附帶參數(shù)的回調(diào)

_zone.runUnaryGuarded(_onData, data)

更多API可以查看官方源碼贸人。

參考

文章匯總

<<Dart 異步與多線程>>

<<Flutter 詳解(一间景、深入了解狀態(tài)管理--ScopeModel)>>

<<Flutter 詳解(二、深入了解狀態(tài)管理--Redux)>>

<<Flutter 詳解(三艺智、深入了解狀態(tài)管理--Provider)>>

<<Flutter 詳解(四倘要、深入了解狀態(tài)管理--BLoC)>>

<<Flutter 詳解 (五、深入了解--Key)>>

<<Flutter 詳解 (六十拣、深入了解--Stream>>

<<Flutter 詳解(七封拧、深入了解繪制原理>>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市夭问,隨后出現(xiàn)的幾起案子哮缺,更是在濱河造成了極大的恐慌,老刑警劉巖甲喝,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡埠胖,警方通過查閱死者的電腦和手機糠溜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來直撤,“玉大人非竿,你說我怎么就攤上這事∧笔” “怎么了红柱?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蓖乘。 經(jīng)常有香客問我锤悄,道長,這世上最難降的妖魔是什么嘉抒? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任零聚,我火速辦了婚禮,結(jié)果婚禮上些侍,老公的妹妹穿的比我還像新娘隶症。我一直安慰自己,他們只是感情好岗宣,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布蚂会。 她就那樣靜靜地躺著,像睡著了一般耗式。 火紅的嫁衣襯著肌膚如雪胁住。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天纽什,我揣著相機與錄音措嵌,去河邊找鬼。 笑死芦缰,一個胖子當(dāng)著我的面吹牛企巢,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播让蕾,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼浪规,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了探孝?” 一聲冷哼從身側(cè)響起笋婿,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎顿颅,沒想到半個月后缸濒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年庇配,在試婚紗的時候發(fā)現(xiàn)自己被綠了斩跌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡捞慌,死狀恐怖耀鸦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情啸澡,我是刑警寧澤袖订,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站嗅虏,受9級特大地震影響洛姑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜旋恼,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一吏口、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧冰更,春花似錦产徊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奠衔,卻和暖如春谆刨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背归斤。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工痊夭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人脏里。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓她我,卻偏偏與公主長得像,于是被迫代替她去往敵國和親迫横。 傳聞我的和親對象是個殘疾皇子番舆,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355