[移动开发]Flutter优化加载网络图片及异常捕获

一、前言

加载网络图片时，有时候因为一些原因导致加载缓慢。所以可以选择如下方式添加占位图。

二、使用

1. 图片占位符

(1) FadeInImage

FadeInImage(
  width: 100,
  fit: BoxFit.cover,
  placeholder: NetworkImage("占位图网址"),
  image: NetworkImage("实际渲染图片网址")
)

(2) 带圆角的FadeInImage

ClipRRect(
  borderRadius: BorderRadius.circular(200.dp),
  child: FadeInImage(
    placeholder: NetworkImage("占位图网址"),
    image: NetworkImage("实际渲染图片网址")
)

2. Widget占位符

(1) Image.frameBuilder属性

四个参数如下：

• context：构建上下文
• child：widget子元素
• frame：如果图片还在加载中的话为null
• wasSynchronousLoaded：布尔值，图片加载完成后为true

Image.network(
  "实际渲染图片网址",
  errorBuilder: (context, error, stackTrace) {
    return CircularProgressIndicator();
  },
  frameBuilder: (context, child, frame, wasSynchronousLoaded){
    if(wasSynchronousLoaded){
      return child;
    }
    return AnimatedOpacity( /// 淡出效果
      child: child,
      opacity: frame == null ? 0 : 1,
      duration: const Duration(seconds: 2),
      curve: Curves.easeOut,
    );
  }
)

(2) Image.loadingBuilder属性

四个参数如下：

• context：构建上下文
• child：widget子元素
• loadingProgress：加载进度，里面包含加载信息
  • loadingProgress.cumulativeBytesLoaded：已经传输的字节
  • loadingProgress.expectedTotalBytes：总字节

Image.network(
  "实际渲染图片网址",
  errorBuilder: (context, error, stackTrace) {
    return CircularProgressIndicator();
  },
  loadingBuilder: (context, child, loadingProgress){
    if(loadingProgress == null){
      return child;
    }
    return Container(
      alignment: Alignment.center,
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
        ? loadingProgress.cumulativeBytesLoaded /
        loadingProgress.expectedTotalBytes!
        : null,
      ),
    );
  }
)

进度条

CircularProgressIndicator如下参数：

• value：进度值， 进度值在0到1.0之间。 如果为空显示动画，非空显示进度
• backgroundColor：背景颜色
• valueColor：进度值颜色
• strokeWidth：进度值宽度，默认4.0