Flutter 異常處理之圖片篇

来源:https://www.cnblogs.com/nesger/archive/2019/04/15/10709079.html
-Advertisement-
Play Games

背景 說到異常處理，你可能直接會認為不就是 try catch 的事情，至於寫一篇文章單獨來說明嗎？ 如果你是這麼想的，那麼本篇說不定會給你驚喜哦~ 而且本篇聚焦在圖片的異常處理。 場景 學以致用，有具體的應用場景，能夠加深我們對知識的掌握。 我們以簡書的文章列表為例，如下圖： 假設產品有這樣的需求 ...


背景

說到異常處理，你可能直接會認為不就是 try-catch 的事情，至於寫一篇文章單獨來說明嗎？

如果你是這麼想的，那麼本篇說不定會給你驚喜哦~

而且本篇聚焦在圖片的異常處理。

場景

學以致用，有具體的應用場景，能夠加深我們對知識的掌握。

我們以簡書的文章列表為例，如下圖：

假設產品有這樣的需求，當右邊的封面圖載入失敗的時候，用一個預設圖片替換或者直接讓文本橫向填充原有圖片位置。

不管處理方式是怎樣，首先我們要做的就是能夠知道圖片載入失敗。

如何獲知圖片載入失敗呢？下麵我們通過 Flutter 自帶網路載入 API 和一個第三方網路庫來進行對比說明。

Image.network

我們看下源碼，如下：

Image.network(String src, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    Map<String, String> headers,
  }) : image = NetworkImage(src, scale: scale, headers: headers),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);

可以看到只有 src 是必填參數，因此我們給出 src 為不同值的情況。

1.一個圖片的 url

  Widget _buildWidget() {
    return Image.network('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800');
  }

能夠正常顯示如下圖：

2.不可訪問 url，如隨便一個字元串 test

  Widget _buildWidget() {
    return Image.network('test');
  }

終端報錯如下：

flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following ArgumentError was thrown resolving an image codec:
flutter: Invalid argument(s): No host specified in URI file:///test

模擬器顯示空白。

這種場景假設我們要捕獲異常，增加 try-catch，如下：

  Widget _buildWidget() {
    try {
      return Image.network('test');
    } catch (e) {
      print('enter catch exception start');
      print(e);
      print('enter catch exception end');
      return Container();
    }
  }

依然沒法捕獲

3.可訪問非圖片 url，比如 http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect

  Widget _buildWidget() {
    try {
      return Image.network('http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect');
    } catch (e) {
      print('enter catch exception start');
      print(e);
      print('enter catch exception end');
      return Container();
    }
  }

控制台拋出如下異常

[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following _Exception was thrown resolving an image codec:
flutter: Exception: operation failed

可以看到 try-catch 一樣沒法生效。沒有列印相關日誌。

cached_network_image

這是一個第三方開發的網路庫，pub 地址為 https://pub.dartlang.org/packages/cached_network_image

因為項目有用到這個庫，所以用這個來舉例，並不是為其打廣告，至於你實際開發是否用這個庫，還是有其他更好的庫，需要你自己去評估。

因為這個是項目組 iOS 同事選擇的，我這邊並沒有深入研究過。

我們仿照上面的依次執行 3 種 case。

1.一個圖片的 url

  Widget _buildWidget() {
    return Image(image: new CachedNetworkImageProvider('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800'));
  }

能夠正常顯示如下圖：

2.不可訪問 url，如隨便一個字元串 test

  Widget _buildWidget() {
    return Image(image: new CachedNetworkImageProvider('test'));
  }

終端報錯如下：

flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following message was thrown resolving an image codec:
flutter: Couldn't download or retrieve file.

模擬器顯示空白。

這種場景假設我們要捕獲異常，增加 try-catch，如下：

  Widget _buildWidget() {
    try {
      return Image(image: new CachedNetworkImageProvider('test'));
    } catch (e) {
      print('enter catch exception start');
      print(e);
      print('enter catch exception end');
      return Container();
    }
  }

依然沒法捕獲。

但是我們通過其自帶的錯誤回調，如下：

  Widget _buildWidget() {
    return Image(
        image: new CachedNetworkImageProvider(
            'test',
            errorListener: () {
              print('enter errorListener');
            }
        )
    );
  }

可以看到控制台進入了 errorListener，列印了對應日誌。

雖然 Flutter 自帶的錯誤日誌依然輸出了，但是通過 errorListener 我們可以獲得這種異常情況。

flutter: enter errorListener
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following message was thrown resolving an image codec:
flutter: Couldn't download or retrieve file.

3.可訪問非圖片 url，比如 http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect

  Widget _buildWidget() {
    return Image(
        image: new CachedNetworkImageProvider(
            'http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect',
            errorListener: () {
              print('enter errorListener');
            }
        )
    );
  }

運行，控制台會報錯，並且沒法捕獲，控制台輸出如下：

[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following _Exception was thrown resolving an image codec:
flutter: Exception: operation failed

使用 try-catch 也是一樣，這裡就不贅餘了。

圖片通用異常捕獲處理

通過上面的學習，我們可以發現不管是 Image.network 還是 cached_network_image 沒法覆蓋全上面兩種異常的捕獲處理。

不過這兩個的共同點就是他們都返回 Image。

所以對於圖片的異常捕獲可以使用下麵通用模板：

//    Image image = Image(image: new CachedNetworkImageProvider(''));
Image image = Image.network('');
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener((_, __) {}, onError: (dynamic exception, StackTrace stackTrace) {
  //TODO error callback
});

這裡首先是獲得 Image，如果獲得的是 ImageProvider，只需要把 image.image 換為你的 ImageProvider 即可，當然這個筆者沒測試，只是看源碼上面模板 image.image 的類型是 ImageProvider。

addListener 有兩個回調，其中成功回調是必填的，有兩個參數，因為這裡不需要用到，因此第一個參數是一個下劃線，第二個參數是兩個下劃線。可能你會說不需要用到，可不可以直接填 null。不行，這邊測試了，填 null 當圖片載入成功時控制台會拋異常。所以提供一個不需要任何實現的回調即可。

錯誤回調是可選的，因為我們本篇的主題就是要獲取錯誤回調，所以這裡提供了實現。

針對我們上面的 3 個例子，我們看看通用模板是否可以全部捕獲。

1.一個圖片的 url

Widget _buildWidget() {
  Image image = Image.network('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800');
  final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
  stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
    print('enter onError start');
    print(exception);
    print(stackTrace);
    print('enter onError end');
  });
  return image;
}

圖片載入成功。

2.不可訪問 url，如隨便一個字元串 test

Widget _buildWidget() {
  Image image = Image.network('test');
  final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
  stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
    print('enter onError start');
    print(exception);
    print(stackTrace);
    print('enter onError end');
  });
  return image;
}

控制台輸出如下：

flutter: enter onError start
flutter: Invalid argument(s): No host specified in URI file:///test
flutter: #0      _HttpClient._openUrl (dart:_http/http_impl.dart:2121:9)
#1      _HttpClient.getUrl (dart:_http/http_impl.dart:2056:48)
#2      NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:486:57)
<asynchronous suspension>
#3      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)
#4      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:86)
#5      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
#6      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:63)
#7      SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29)
#8      ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:265:30)
#9      MyApp._buildWidget (package:my_flutter/main.dart:20:42)
#10     MyApp.build (package:my_flutter/main.dart:12:18)
#11     StatelessElement.build (package:flutter/<…>
flutter: enter onError end

可以看到確實進入錯誤回調了。

3.可訪問非圖片 url，比如 http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect

Widget _buildWidget() {
  Image image = Image.network('http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect');
  final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
  stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
    print('enter onError start');
    print(exception);
    print(stackTrace);
    print('enter onError end');
  });
  return image;
}

控制台輸出如下：

[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
flutter: enter onError start
flutter: Exception: operation failed
flutter: #0      NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:498:12)
<asynchronous suspension>
#1      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)
#2      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:86)
#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
#4      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:63)
#5      SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29)
#6      ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:265:30)
#7      MyApp._buildWidget (package:my_flutter/main.dart:20:42)
#8      MyApp.build (package:my_flutter/main.dart:12:18)
#9      StatelessElement.build (package:flutter/src/widgets/framework.dart:3774:28)
#10     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15<…>
flutter: enter onError end

可以看到確實進入錯誤回調了。

更多閱讀：

Flutter 入門系列博客
Flutter & Dart

最後來一個彩蛋表情包：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 大數據學習（二）-------- MapReduce
    前提已經安裝好hadoop的hdfs集群，可以查看 https://www.cnblogs.com/tree1123/p/10683570.html Mapreduce是hadoop的運算框架，可以對hdfs中的數據分開進行計算，先執行很多maptask，在執行reducetask，這個過程中任務的 ...
  • 快速查找所有存儲過程/觸發器中是否包含某個字元串
    快速查找所有存儲過程中是否包含某個字元串 ...
  • SQL Server 創建跨庫查詢、修改、增加、刪除
    一、通過SQL語句訪問遠程資料庫 --OPENROWSET函數 使用OPENROWSET()是個不錯的選擇，也可以用做跨庫查詢包括增、刪、改、查 下麵就來介紹一下OPENROWSET函數的運用 包含訪問 OLE DB 數據源中的遠程數據所需的全部連接信息。當訪問鏈接伺服器中的表時，這種方法是一種替代 ...
  • [20190415]11g下那些latch是共用的.txt
    [20190415]11g下那些latch是共用的.txthttp://andreynikolaev.wordpress.com/2010/11/23/shared-latches-by-oracle-version/--//oracle並沒有文檔準確說明那些latch是支持共用,作者的鏈接通過使用 ...
  • LogWriter: Operating system error 21(error not found) encountered
    一臺老舊的資料庫伺服器（SQL Server 2005）突然報如下錯誤，而且資料庫處於RECOVERY PENDING ，檢查錯誤日誌，發現這個錯誤是突然出現的。沒有任何其它人為誤操作導致 Date 2019/4/15 10:57:47 Log SQL Server (Archive #1 - 20... ...
  • 《工業大數據白皮書》2019版正式發佈（附下載）
    《工業大數據白皮書（2019版）》基於工業大數據技術、產業發展現狀，重點圍繞“工業數據管理”這一熱點議題，提煉了當前工業領域數據管理的重要方法，完善了工業大數據標準體系，為推動工業大數據落地應用和戰略部署提供標準化支撐。 ...
  • 資料庫原理 - 序列5 - 事務是如何實現的？ - Undo Log解析
    本文節選自作者書籍《軟體架構設計：大型網站技術架構與業務架構融合之道》。作者微信公眾號：架構之道與術。公眾號底部菜單有書友群可以加入，與作者和其他讀者進行深入討論。也可以在京東、天貓上購買紙質書籍。 6.6 事務實現原理之2：Undo Log 6.6.1 Undo Log是否一定需要 說到Undo ...
  • Redis之Redis安裝（Mac OS版本）
    各版本下載地址：http://download.redis.io/releases，本教程使用版本為redis-5.0.4。 附錄： （一）執行make命令報錯解決方案： 報錯內容： 解決方案： 在終端輸入如下命令，安裝Xcode命令行工具： 安裝完成後，繼續從make命令往下執行即可。 註：如有錯 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類