首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 异常处理之图片篇

Flutter 异常处理之图片篇

作者头像
AndroidTraveler
发布2019-04-25 15:15:09
2.1K0
发布2019-04-25 15:15:09
举报
文章被收录于专栏:AndroidTravelerAndroidTraveler

背景

说到异常处理,你可能直接会认为不就是 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 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 errorListenerflutter: ══╡ 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 startflutter: Invalid argument(s): No host specified in URI file:///testflutter: #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)
#3      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)#4      ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:267:86)#5      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)#6      ImageProvider.resolve. (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 startflutter: Exception: operation failedflutter: #0      NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:498:12)
#1      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)#2      ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:267:86)#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)#4      ImageProvider.resolve. (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

可以看到确实进入错误回调了。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-04-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 安卓小煜 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档