Flutter Flutter

Flutter的网络图片加载监听

2021-08-30  本文已影响0人  xmb

加载成功或加载失败时,添加自定义的处理,比如加载失败显示失败的默认图片。
示例如下:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:info_valley/constant/constant_value.dart';

/// 封装图片加载控件,增加图片加载失败时加载默认图片
/// 此处,目前只用于聊天的头像展示本地图片失败的情况下的处理
class ChatAvatarCustomWidget extends StatefulWidget {
  ChatAvatarCustomWidget({@required this.path, this.width, this.height, this.defImagePath = Constant.msgAvatar, this.fit});

  final String path;
  final double width;
  final double height;
  final String defImagePath;
  final BoxFit fit;

  @override
  State<StatefulWidget> createState() {
    return _StateImageWidget();
  }
}

class _StateImageWidget extends State<ChatAvatarCustomWidget> {
  Image _image;

  @override
  void initState() {
    super.initState();
    _image = Image.file(
      File(widget.path),
      width: widget.width,
      height: widget.height,
      fit: widget.fit,
    );
    var resolve = _image.image.resolve(ImageConfiguration.empty);
    resolve.addListener(ImageStreamListener(
      (_, __) {
        //加载成功
      },
      onError: (dynamic exception, StackTrace stackTrace) {
        //加载失败
        setState(() {
          _image = Image.asset(
            widget.defImagePath,
            width: widget.width,
            height: widget.height,
          );
        });
      },
    ));
  }

  @override
  Widget build(BuildContext context) {
    return _image;
  }
}

上一篇下一篇

猜你喜欢

热点阅读