Flutter控件之图片Image封装-阿里云开发者社区

为什么要进行繁琐的封装？直接用也挺好啊，这个回答一点毛病没有，大部分视图都可以原生绘制，可在Flutter中偏偏原生的控件，少了很多需要又常用的属性，比如宽高，比如内外边距，又比如点击事件，如果不采取封装，视图的结构会一层嵌套一层，徒增很多的冗余代码，所以，为了简洁代码，还有为了拓展原生组件没有的属性，就不得不进行一次简单的封装，使其在调用的时候，可以很方便的实现某些功能。

本来只打算封一个Widget的基类就算了，但是想到很多的基础组件其实也需要进行拓展一些属性，那么索性就一一封一下吧，既是学习，也是积累，本篇文章就简单的针对图片Image做一个封装，此Image也是基于第一篇的BaseWidget，不熟悉的可以看下第一篇的文章。

还是按照惯例，简单的罗列下基本的大纲：

1、实际的效果一览

2、Image相关属性分析

3、源码和具体使用

4、相关总结

一、实际的效果一览

效果呢，很是简单，就是一些平时的功能，比如圆角，圆形，设置占位图等等。

二、Image相关属性分析

自定义Image继承了父类的一些属性，比如宽高，内外边距，点击事件等，当然了，也增加了自己独有的一些属性，比如圆角，圆形，占位图等，具体的父类属性就不过多介绍了，看第一篇文章即可，简单的列举下Image的相关属性。

属性	类型	概述
placeholderImage	String	占位图（仅支持assets）
errorImage	String	错误图（仅支持assets）
imagePath	String	图片地址（支持网络/assets/File）
imageBoxFit	BoxFit	图片拉伸方式 fill：Box被完全填充，相当于ScaleType的FIT_XY。 contain：保持Box的纵横比至至少有一边填充满父控件，相当于ScaleType的FIT_CENTER。 cover：保持Box的纵横比进行缩放至Box完全填充满父控件，超出部分进行裁剪，相当于ScaleType的CENTER_CROP。 fitWidth：缩放Box宽直至填充满父控件。 fitHeight：缩放Box高直至填充满父控件。 none：不进行任何缩放操作。 scaleDown：Box大于父控件，则采用与contain一致的缩放模式，否则采用none缩放模式。
imageLoadType	int	图片加载类型
isClipOval	bool	是否是圆形
imageRadius	double	设置图片圆角

三、源码和具体使用

源码就比较过分的简单了，一是继承原有的BaseWidget属性，二是拓展自己的相关属性，占位图，错误图，是否圆形，设置圆角等，具体的源码如下：

import'dart:io';
import'package:flutter/material.dart';
import'../../base/base_widget.dart';
///AUTHOR:AbnerMing///DATE:2023/5/20///INTRODUCE:图片控件classVipImageextendsBaseWidget {
finalString?placeholderImage; //占位图finalString?errorImage; //错误图finalString?imagePath; //图片地址finalBoxFit?imageBoxFit; //图片拉伸方式finalint?imageLoadType; //图片加载类型finalbool?isClipOval; //是否是圆形finaldouble?imageRadius; //设置图片圆角constVipImage(this.imagePath,
      {super.key,
this.placeholderImage,
this.errorImage,
this.imageBoxFit,
this.imageLoadType,
this.isClipOval,
this.imageRadius,
super.width,
super.height,
super.margin,
super.marginLeft,
super.marginTop,
super.marginRight,
super.marginBottom,
super.padding,
super.paddingLeft,
super.paddingTop,
super.paddingRight,
super.paddingBottom,
super.backgroundColor,
super.strokeWidth,
super.strokeColor,
super.solidColor,
super.radius,
super.isCircle,
super.leftTopRadius,
super.rightTopRadius,
super.leftBottomRadius,
super.rightBottomRadius,
super.childWidget,
super.alignment,
super.gradient,
super.gradientBegin,
super.gradientEnd,
super.gradientColorList,
super.gradientColorStops,
super.onClick,
super.onDoubleClick,
super.onLongPress});
@overrideWidgetgetWidget(BuildContextcontext) {
//不需要占位图if (placeholderImage==null) {
returngetEndWidget(getImage());
    } else {
returngetEndWidget(getFadeInImage());
    }
  }
/** 返回最终的Widget* */WidgetgetEndWidget(widget) {
//设置图片为圆形if (isClipOval==true) {
returnClipOval(child: widget);
    }
//设置图片圆角if (imageRadius!=null) {
returnClipRRect(
borderRadius: BorderRadius.circular(imageRadius!), child: widget);
    }
returnwidget;
  }
/** 有无占位图组件* */WidgetgetFadeInImage() {
returnFadeInImage(
fit: imageBoxFit??BoxFit.contain,
placeholderFit: imageBoxFit??BoxFit.contain,
placeholder: getPlaceholder(),
image: getImageProvider(),
placeholderErrorBuilder: (ctx, err, stackTrace) =>_imagePlaceholder(),
imageErrorBuilder: (ctx, err, stackTrace) =>_imageError());
  }
/** 无占位图组件* */WidgetgetImage() {
returnImage(
image: getImageProvider(),
fit: imageBoxFit??BoxFit.contain,
errorBuilder: (ctx, err, stackTrace) =>_imageError());
  }
/** 占位图错误组件* */Widget_imagePlaceholder() {
returnImage.asset("", fit: imageBoxFit??BoxFit.contain);
  }
/** 错误组件* */Widget_imageError() {
varimagePath="";
if (errorImage!=null) {
imagePath=errorImage!;
    }
returnImage.asset(imagePath, fit: imageBoxFit??BoxFit.contain);
  }
/** 判断图片是网络还是本地还是应用内* */ImageProvidergetImageProvider() {
if (imageLoadType==null) {
returnNetworkImage(imagePath!);
    } elseif (imageLoadType==0) {
returnFileImage(File(imagePath!));
    } else {
returnAssetImage(imagePath!);
    }
  }
/** 占位图* */ImageProvidergetPlaceholder() {
returnAssetImage(placeholderImage!);
  }
}

简单使用

VipImage("https://www.vipandroid.cn/ming/image/gan.png")

具体案例（对应第一条的效果图）

这个案例中结合了之前封装的VipText控件，大家可以直接看那篇文章即可，当然你可以删除，本身它就是一个文本Text控件，用来做个描述信息。

import'package:flutter/material.dart';
import'../../constants/dimen_constant.dart';
import'../../constants/image_constant.dart';
import'../widget/vip_image.dart';
import'../widget/vip_text.dart';
///AUTHOR:AbnerMing///DATE:2023/5/20///INTRODUCE:Image组件效果页面classImagePageextendsStatefulWidget {
constImagePage({super.key});
@overrideState<ImagePage>createState() =>_ImagePageState();
}
class_ImagePageStateextendsState<ImagePage> {
@overrideWidgetbuild(BuildContextcontext) {
returnContainer(
alignment: Alignment.center,
padding: constEdgeInsets.only(
left: DimenConstant.dimen_10, right: DimenConstant.dimen_10),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
VipImage(
"https://www.vipandroid.cn/ming/image/gan.png",
marginTop: DimenConstant.dimen_10,
            ),
VipText("(普通加载)", marginTop: DimenConstant.dimen_5),
VipImage(
"https://www.vipandroid.cn/ming/image/gan.png",
marginTop: DimenConstant.dimen_10,
width: 80,
height: 80,
            ),
VipText("(设置宽高)", marginTop: DimenConstant.dimen_5),
VipImage(
"https://www.vipandroid.cn/ming/image/gan.png",
marginTop: DimenConstant.dimen_10,
imageBoxFit: BoxFit.fill,
width: 80,
height: 80,
            ),
VipText("(设置宽高拉伸充满)", marginTop: DimenConstant.dimen_5),
VipImage(
"https://www.vipandroid.cn/ming/image/gan.png",
marginTop: DimenConstant.dimen_10,
imageBoxFit: BoxFit.cover,
width: 80,
height: 80,
            ),
VipText("(设置宽高居中裁切)", marginTop: DimenConstant.dimen_5),
VipImage(
"https://www.vipandroid.cn/ming/image/gan.png",
marginTop: DimenConstant.dimen_10,
imageBoxFit: BoxFit.cover,
placeholderImage: ImageConstant.imageDefault,
width: 80,
height: 80,
            ),
VipText("(设置占位图)", marginTop: DimenConstant.dimen_5),
VipImage(
"https://www.vipandroid.cn/ming/image/gan.png",
marginTop: DimenConstant.dimen_10,
imageBoxFit: BoxFit.cover,
isClipOval: true,
width: 80,
height: 80,
            ),
VipText("(设置圆形)", marginTop: DimenConstant.dimen_5),
VipImage(
"https://www.vipandroid.cn/ming/image/gan.png",
marginTop: DimenConstant.dimen_10,
imageBoxFit: BoxFit.cover,
imageRadius: DimenConstant.dimen_10,
placeholderImage: ImageConstant.imageDefault,
width: 80,
height: 80,
            ),
VipText("(设置圆角)", marginTop: DimenConstant.dimen_5),
          ])),
    );
  }
}

DimenConstant

把相关尺寸抽成了一个常量类了，目的便于管理，大家不想用直接代码写值也行。

///AUTHOR:AbnerMing///DATE:2023/5/15///INTRODUCE:尺寸常量classDimenConstant {
staticconstdoubledimen_5=5;
staticconstdoubledimen_10=10;
staticconstdoubledimen_15=15;
staticconstdoubledimen_22=22;
staticconstdoubledimen_44=44;
}

ImageConstant

图片常量类，用来存储一些assets下的图片地址，便于管理。

///AUTHOR:AbnerMing///DATE:2023/5/15///INTRODUCE:图片地址常量classImageConstant {
staticconstStringimageDefault="images/vip_ic_image_default.png";
}

四、相关总结

在项目开发的时候，关于一些常量信息，比如尺寸的大小，本地的图片地址，请求的接口地址等等，我们一般不要直接在页面中写死，一是不方便管理，二是后期一旦改动，就需要查找每个文件，非常的浪费时间，所以，尽量抽取到一个地方，类似Android中的，strings.xml，dimens.xml，colors.xml这些文件，好了铁子们，本篇文章就先到这里，希望可以帮助大家。

Flutter控件之图片Image封装