Flutter 詳解（七、深入了解繪制原理）

Future

Future有三種狀態未完成、完成帶有值、完成帶有異常，使用Future可以簡化事件任務。 假如你有一個按鈕，點擊之后開始下載圖片，首先事件循環機制會處理你的點擊事件，然后開始下載圖片，當下載完成，你可以使用then來注冊回調，然后獲取到圖片并顯示出來。

通常我們不會直接創建，網絡下載圖片會返回一個Future,文件I/O會返回一個Future,那我們怎么創建一個呢？只需要關鍵字async就表示該函數異步執行，返回類型是Future<T>。

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

使用http請求地址www.fgyong.cn獲取數據，然后返回。

如何接收文本呢？

其實很簡單，只需要使用await關鍵字即可，用來注冊then回調。

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

等同于：

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

官方比較推薦前者，因為前者看起來很像同步函數，少了層層嵌套，方便開發者理解代碼。
網絡下載想延遲動畫隱藏時間，可以使用Future.delayed()。

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

如果已經帶有值的想異步去執行，那么可以使用Future.value()

Stream

dart：async庫包含對許多Dart API很重要的兩種類型：Stream和Future。如果Future表示單個計算的結果，則流是一系列結果。您偵聽流以獲取有關結果（數據和錯誤）以及流關閉的通知。您還可以在收聽流時暫停播放或在流完成之前停止收聽。

如何使用Stream

流可以通過多種方式創建，后續在仔細講解，但是它們都可以以相同的方式使用：異步for循環（通常僅稱為await for）遍歷流的事件，如for循環迭代遍歷。例如：

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

此代碼僅接收整數事件流中的每個事件，將它們相加，然后返回（和）其和。當循環主體結束時，函數將暫停，直到下一個事件到達或流完成為止。 該函數標記有async關鍵字，在使用await for循環時需要此關鍵字。 以下示例通過使用async *函數生成簡單的整數流來測試前面的代碼：

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
}

當流中沒有更多事件時，就完成流，并通知接收事件的代碼，就像通知新事件到來一樣。使用await for循環讀取事件時，流完成后循環停止。 在某些情況下，流完成之前會發生錯誤；可能是網絡從遠程服務器上獲取文件時發生故障，或者創建事件的代碼存在錯誤，但是有人需要了解它。 流還可以傳遞錯誤事件，就像傳遞數據事件一樣。大多數流將在出現第一個錯誤后停止，但有可能傳遞多個錯誤的流以及在發生錯誤事件后傳遞更多數據的流。在本文檔中，我們僅討論最多產生一個錯誤的流。 當使用await for讀取流時，循環語句會引發錯誤。這也結束了循環。您可以使用try-catch捕獲錯誤。以下示例在循環迭代器等于時引發錯誤 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請求時獲得的流。 這樣的流只能被收聽一次。稍后再次收聽可能意味著錯過了最初的事件，然后其余部分毫無意義。當您開始收聽時，數據將被提取并以塊的形式提供。 廣播流 另一種流是針對可以一次處理的單個消息的。例如，這種流可用于瀏覽器中的鼠標事件。 您可以隨時開始收聽這樣的流，并且在收聽時會觸發事件。多個收聽者可以同時收聽，并且您可以在取消上一個訂閱之后稍后再次收聽。

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來循環

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);

這些基本都是使用閉包過濾流的內容，當然也可以轉換內容。

監聽Stream

最后是監聽，當流改變時會觸發監聽listen()，所有的流都可以被監聽。

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

創建自己的Stream

創建Stream大概有三種，如下所示：

  • 轉換Stram
  • 使用async*創建Stream
  • 使用StreamController創建

轉換Stram

經常有些Stream包含的值不是我們想要的，那么就需要我們轉換一下了，例如我們把數字轉成字符串.

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

也可以轉成數組

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

使用async*創建Stream

創建新流的一種方法是使用異步生成器（async *）函數。在調用該函數時創建該流，并且在偵聽該流時該函數的主體開始運行。函數返回時，流關閉。在函數返回之前，它可以使用yield或yield *語句在流上發出事件。

這是一個原始示例，該示例會定期發射數字：

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

此函數返回一個Stream。當收聽該流時，主體開始運行。它反復延遲請求的時間間隔，然后產生下一個數字。如果忽略count參數，則循環上沒有停止條件，因此流永遠輸出越來越大的數字-或直到偵聽器取消其訂閱為止。 當偵聽器取消時（通過在listen（）方法返回的StreamSubscription對象上調用cancel（）），則主體下一次到達yield語句時，yield將充當return語句。執行所有封閉的finally塊，然后函數退出。如果函數嘗試在退出前產生一個值，則該操作將失敗并充當返回值。 當函數最終退出時，由cancel（）方法返回的Future完成。如果函數以錯誤退出，則Future會以該錯誤結束；否則，它以null結束。 另一個更有用的示例是一個轉換序列的函數：

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

使用yield*

使用yield*來調用其他的函數取下一個值，當不獲取的時候，則不運行。

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

yield*和yield區別是后者直接返回一個固定的值，而前者返回是的是一個函數。前者多用于分流，把一個Stream<T>分為其他的Stream<R>或Stream<E>。

使用StreamController創建stream 

_streamController = StreamController();
// 監聽
_streamController.stream.listen((event) { })
/// 添加數據
_streamController.add('data');

StreamControlelr的類圖如下所示，他們從Sink到StreamSink都只是到導入接口，并無直接繼承關系，在抽象類方面按照功能解耦，最終由StreamController整合，負責添加的是StreamControlelr,負責監聽的是Stream,最終在當前的Zone中執行回調Zone.runUnaryGuarded()。Zone類似一個沙盒環境，在APP啟動的時候創建。

image

原理

StreamController中初始化，直接調用了_SyncStreamController，具體功能全部在_SyncStreamController(同步)或_AsyncStreamController(異步)中實現。

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類中，實現了
onDone和onError函數，他們分別在類實例化的時候注冊回調函數。

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

那么listener函數是在何時添加的呢？
在獲取stream是_ControllerStream(),最終listener函數是_StreamImpl extends Steam中實現的，代碼如下：

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;
  }
  
/// 創建一個訂閱者
StreamSubscription<T> _createSubscription(void onData(T data),
    Function onError, void onDone(), bool cancelOnError) {
  return new _BufferingStreamSubscription<T>(
      onData, onError, onDone, cancelOnError);
}

最終監聽是執行的_BufferingStreamSubscription的_onData(void HandleData(T event))，這里是使用了_zone.registerUnaryCallback來注冊回調函數，否則在調用的時候會報錯。

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

在stream.add()函數執行了_add(),源碼如下

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

當狀態已關閉，直接斷言，當狀態已取消，返回操作，當可以發送數據，則執行_sendData()函數，該函數才是最終發送數據，執行listen操作的關鍵函數，源碼如下：

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;獲取當前的Zone來執行已經注冊的回調_zone.runUnaryGuarded(_onData, data),執行完畢,使用_state&=~_STATE_IN_CALLBACK來保存當前狀態，使用&=~舍棄第6位數字，_STATE_IN_CALLBACK值為32，那么低第六位是1，~_STATE_IN_CALLBACK,除了第六位，剩下的都是1，然后&=來取出來其他的位數值保存下來。

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

那么再執行完畢_sendDone()的時候也是如此，首先判斷是否已經取消，沒取消的話，執行_onDone回調。

 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調用已經注冊好的回調，廣播是循環調用

關鍵函數：

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

/// 注冊不帶參數的回調

_zone.registerCallback(R callback())

/// 執行 附帶參數的回調

_zone.runUnaryGuarded(_onData, data)

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

參考

文章匯總

<<Dart 異步與多線程>>

<<Flutter 詳解（一、深入了解狀態管理--ScopeModel）>>

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

<<Flutter 詳解（三、深入了解狀態管理--Provider)>>

<<Flutter 詳解（四、深入了解狀態管理--BLoC)>>

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

<<Flutter 詳解 （六、深入了解--Stream>>

<<Flutter 詳解（七、深入了解繪制原理>>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,786評論 6贊 534
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,656評論 3贊 419
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,697評論 0贊 379
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,098評論 1贊 314
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,855評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,254評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,322評論 3贊 442
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,473評論 0贊 289
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,014評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,833評論 3贊 355
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,016評論 1贊 371
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,568評論 5贊 362
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,273評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評論 1贊 288
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,730評論 3贊 393
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,006評論 2贊 374