Flutter 重复造轮子 (1) Image 图片显示组件的封

2023-09-08 本文已影响0人半城半离人

详细可以访问仓库 HcUi: 重复创造Flutter 的轮子在原有组件上拓展展现出新的特性 (gitee.com)

介绍

增强版的 image 组件，可以显示本地\assest\base64\网络图片，支持图片缓存、加载中提示、加载失败提示。夜间模式下增加图片蒙版

本地\assest\base64采用原生的Image组件显示因为网络图片涉及到图片缓存这里使用到了三方插件CachedNetworkImage
夜间模式下增加图片蒙版使用ShaderMask 组件给图片上覆盖一层颜色达到效果

rds6d-jnoo8.gif

代码演示

基础用法

基础用法与原生Image组件一致,可以设置高度,宽度,图片混合颜色,图片拉伸样式,可以设置圆角矩形角度

  //展示网络图片资源
  HcImage(
    imagePath:'https://rs-channel.huanqiucdn.cn/imageDir/8dc52be8f380054d30ea8071e728d19au5.jpg'),
  //展示assest图片资源
  HcImage(
    imagePath:'assets/images/group.png'),
  //展示本机图片资源(需要申请权限)
  HcImage(
    imagePath:'/storage/emulated/0/Android/data/group.png'),
  //展示base64图片资源(带不带头均可)
  HcImage(
    imagePath:'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='),

圆形图片

通过.circle构造可以设置图片变圆，必选参数为size 和图片路径

 HcImage.circle(
    imagePath:
      'https://rs-channel.huanqiucdn.cn/imageDir/8dc52be8f380054d30ea8071e728d19au5.jpg',
      size: 120.0,
    ),

图片加载中

HcImage提供了一个默认的加载中的组件,如需自定义可以传入loadingBuilder

 HcImage(
  loadingBuilder: (context, url, progress) =>
   CircularProgressIndicator(
  value: progress.progress,),
  imagePath:'https://rs-channel.huanqiucdn.cn/imageDir/8dc52be8f380054d30ea8071e728d19au5.jpg'),

图片加载失败

HcImage组件提供了默认的加载失败提示，支持通过errorBuilder传入自定义组件
本地图片加载出错会返回堆栈信息网络图片出错会返回网址

        HcImage(
                loadingBuilder: (context, url, progress) =>
                    CircularProgressIndicator(
                      value: progress.progress,
                    ),
                errorBuilder: (context,error,url)=>Text("图片出错了"),
                imagePath:
                    'https://rs-channel.huanqiucdn.cn/imageDir/8dc52be8f380054d30ea8071e728d19au5.jpg'),

API

props

参数	说明	类型	默认值	是否必填
imagePath	图片地址(本地\assets\网络\base64)	String	-	true
errorBuilder	图片出错占位符	Function	-	false
loadingBuilder	图片加载占位符	Function	-	false
httpHeader	请求图片的标题头	Map<String, String>	-	false
height	图片高度	double	-	false
width	图片的宽度	double	-	false
fit	图片填充模式，具体查看BoxFit	BoxFit	BoxFit.fill	false
filterQuality	图片质量	FilterQuality	FilterQuality.low	false
color	图片混合颜色	Color	-	false
colorBlendMode	图片混色模式，具体查看BlendMode	BlendMode	-	false
alignment	图片对齐方式	Alignment	Alignment.center	false
repeat	盒子大于图片时的图片重复方式	ImageRepeat	ImageRepeat.noRepeat	false
borderRadius	图片的圆角大小	BorderRadius	BorderRadius.zero	false

Function

方法名	说明	参数	返回类型
errorBuilder	图片出错占位符	(BuildContext context,dynamic error, dynamic url)	Widget
loadingBuilder	图片加载占位符	( BuildContext context, String url,DownloadProgress progress)	Widget

项目源码

///图片加载出错的构建函数
/// 本地图片构建出错返回堆栈信息 网络图片返回网络路径
typedef ImageErrorBuilder = Widget Function(
  BuildContext context,
  dynamic error,
  dynamic url,
);

class HcImage extends StatelessWidget {
  //图片地址
  final String imagePath;

  //图片出错的占位符
  final ImageErrorBuilder? errorBuilder;

  //加载中的占位符
  final ProgressIndicatorBuilder? loadingBuilder;

  //请求图片的标题头
  final Map<String, String>? httpHeader;

  ///高度
  final double? height;

  ///宽度
  final double? width;

  ///图片的 Fit
  final BoxFit? fit;

  ///图片质量
  final FilterQuality? filterQuality;

  //图片混合颜色
  final Color? color;

  /// 混合模式
  final BlendMode? colorBlendMode;

  /// 对齐方式 默认居中
  final Alignment alignment;

  //是否重复
  final ImageRepeat repeat;
final ThemeMode themeMode;

  //图片的圆角
  final BorderRadius? borderRadius;

  const HcImage({
    super.key,
    required this.imagePath,
    this.errorBuilder,
    this.loadingBuilder,
    this.httpHeader,
    this.height,
    this.width,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.filterQuality = FilterQuality.low,
    this.color,
this.themeMode=ThemeMode.dark,
    this.colorBlendMode,
    this.borderRadius,
  });

  HcImage.circle({
    super.key,
    required this.imagePath,
    this.errorBuilder,
    this.loadingBuilder,
    this.httpHeader,
    required double size,
    this.filterQuality,
    this.color,
this.themeMode=ThemeMode.dark,

    this.colorBlendMode,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
  })  : width = size,
        height = size,
        borderRadius = BorderRadius.circular(size / 2),
        fit = BoxFit.cover;

  @override
  Widget build(BuildContext context) {
    // 获取图片的信息
    Map<String, dynamic> imageInfo = _checkAndFixImagePath(imagePath);
    //图片的照片属性
    HcImageType type = imageInfo['type'];
    //图片的路径
    String imageUrl = imageInfo['url'];
    //本地图片展示的Provider;
    ImageProvider? imageProvider;
    switch (type) {
      case HcImageType.assets:
        imageProvider = AssetImage(imageUrl);
        break;
      case HcImageType.file:
        imageProvider = FileImage(File(imageUrl));
        break;
      case HcImageType.base64:
        Uint8List bytes = const Base64Decoder().convert(imageUrl);
        imageProvider = MemoryImage(bytes);
        break;
      case HcImageType.network:
        imageProvider = null;
        break;
    }
    //夜间模式增加遮罩 日间模式不增加
    Color maskColor = themeMode == ThemeMode.dark
        ? Colors.grey
        : Colors.white;
    return ClipRRect(
      borderRadius:
          borderRadius ?? BorderRadius.circular(size / 2) ,
      child: ShaderMask(
        shaderCallback: (Rect bounds) {
          return LinearGradient(colors: [maskColor, maskColor])
              .createShader(bounds);
        },
        child: imageProvider != null
            ? Image(
                image: imageProvider,
                width: width,
                height: height,
                fit: fit,
                color: color,
                alignment: alignment,
                repeat: repeat,
                colorBlendMode: colorBlendMode,
                filterQuality: filterQuality ??FilterQuality.low,
                errorBuilder: (context, error, stackTrace) =>
                    _imageErrorBuilder(context, error, stackTrace),
              )
            : CachedNetworkImage(
                imageUrl: imageUrl,
                width: width,
                height: height,
                httpHeaders:httpHeader,
                fit: fit,
                color: color,
                alignment: alignment,
                repeat: repeat,
                colorBlendMode: colorBlendMode,
                errorWidget: (context, url, error) =>
                    _imageErrorBuilder(context, error, url),
                progressIndicatorBuilder: (context, url, progress) =>
                    _imageLoadingBuilder(context, url, progress),
              ),
      ),
    );
  }

  ///图片加载出错的方法
  Widget _imageErrorBuilder(BuildContext context, dynamic error, dynamic url) {
    if (errorBuilder != null) {
      return errorBuilder!(context, error, url);
    }
    return Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.zero,
      
        ),
        padding: const EdgeInsets.all(20),
        child: const Center(
            child: Icon(Icons.error_outline,
                size: 32)));
  }

  ///图片加载中的方法
  Widget _imageLoadingBuilder(context, url, progress) {
    if (loadingBuilder != null) {
      return loadingBuilder!(context, url, progress);
    }
    return Container(
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.zero,
       
      ),
      padding: const EdgeInsets.all(20),
      child: const CircularProgressIndicator(),
    );
  }
}

判断图片来源的方法

///图片的类型
/// assets资源文件
/// file 本机文件
/// base64图片
/// network资源
enum HcImageType { assets, file, base64, network }
  /// 检测图片类型并格式化路径
  static Map<String, dynamic> checkAndFixImagePath(String url) {
    Map<String, dynamic> result = {};
    // /开头可能是本地资源也可能是网络资源的 相对地址
    // 本地资源路径规则
    // Android: /data/user 或/storage/emulated/0/Android..
    // ios /var/mobile/...
    if (url.startsWith('/')) {
      File file = File(url);
      //检测文件是否存在
      bool isExists = file.existsSync();
      if (isExists) {
        result['type'] = HcImageType.file;
        result['url'] = url;
        return result;
      }
    }
    //如果是网络或者带/非本地资源
    if (url.toLowerCase().startsWith('http') || url.startsWith('/')) {
      result['type'] = HcImageType.network;
      result['url'] = url;
    } else if (!url.contains('.') && checkBase64(url)) {
      //如果是base64获取去头后的路径
      result['type'] = HcImageType.base64;
      List<String> base64SplitList = url.split(",");
      result['url'] = base64SplitList[base64SplitList.length - 1];
    } else {
      //String字符串不是本地图片也不是网络图片也不是base64 开头没有带/ 所以是assets资源
      result['type'] = HcImageType.assets;
      result['url'] = url;
    }
    return result;
  }
  //判断字符串是否为base64
  static bool checkBase64(String str) {
    RegExp base64Head = RegExp(r"data:\S+/\S+;base64,");
    //如果默认是64的头 那么就返回true
    if (base64Head.hasMatch(str) ) {
      return true;
    }
    //切割base64取尾段
    List<String> splitList = str.split(',');
    str = splitList[splitList.length - 1];
    return checkIsBase64(str);
  }
  static checkIsBase64(String str) {
    RegExp regExp = RegExp(
        r"(data:\S+/\S+;base64,)?(([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)){1}");
    bool firstCheck = regExp.hasMatch(str);
    //初步判断是否符合Base64格式
    if (!firstCheck) {
      return false;
    }
    //尝试看是否能还原成Unit8List
    try {
      Uint8List decStr = const Base64Decoder().convert(str);
      return true;
    } catch (e) {
      return false;
    }
  }
  }