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

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

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

1、实际的效果一览

2、Image相关属性分析

3、源码和具体使用

4、相关总结

一、实际的效果一览

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

二、Image相关属性分析

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

三、源码和具体使用

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

import 'dart:io';
import 'package:flutter/material.dart';

import '../../base/base_widget.dart';

///AUTHOR:AbnerMing
///DATE:2023/5/20
///INTRODUCE:图片控件

class VipImage extends BaseWidget {
  final String? placeholderImage; //占位图
  final String? errorImage; //错误图
  final String? imagePath; //图片地址
  final BoxFit? imageBoxFit; //图片拉伸方式
  final int? imageLoadType; //图片加载类型
  final bool? isClipOval; //是否是圆形
  final double? imageRadius; //设置图片圆角
  const VipImage(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});

  @override
  Widget getWidget(BuildContext context) {
    //不需要占位图
    if (placeholderImage==null) {
      return getEndWidget(getImage());
    } else {
      return getEndWidget(getFadeInImage());
    }
  }

  /*
  * 返回最终的Widget
  * */
  Widget getEndWidget(widget) {
    //设置图片为圆形
    if (isClipOval==true) {
      return ClipOval(child: widget);
    }
    //设置图片圆角
    if (imageRadius !=null) {
      return ClipRRect(
          borderRadius: BorderRadius.circular(imageRadius!), child: widget);
    }
    return widget;
  }

  /*
  * 有无占位图组件
  * */
  Widget getFadeInImage() {
    return FadeInImage(
        fit: imageBoxFit ?? BoxFit.contain,
        placeholderFit: imageBoxFit ?? BoxFit.contain,
        placeholder: getPlaceholder(),
        image: getImageProvider(),
        placeholderErrorBuilder: (ctx, err, stackTrace)=> _imagePlaceholder(),
        imageErrorBuilder: (ctx, err, stackTrace)=> _imageError());
  }

  /*
  * 无占位图组件
  * */
  Widget getImage() {
    return Image(
        image: getImageProvider(),
        fit: imageBoxFit ?? BoxFit.contain,
        errorBuilder: (ctx, err, stackTrace)=> _imageError());
  }

  /*
  * 占位图错误组件
  * */
  Widget _imagePlaceholder() {
    return Image.asset("", fit: imageBoxFit ?? BoxFit.contain);
  }

  /*
  * 错误组件
  * */
  Widget _imageError() {
    var imagePath="";
    if (errorImage !=null) {
      imagePath=errorImage!;
    }
    return Image.asset(imagePath, fit: imageBoxFit ?? BoxFit.contain);
  }

  /*
  * 判断图片是网络还是本地还是应用内
  * */
  ImageProvider getImageProvider() {
    if (imageLoadType==null) {
      return NetworkImage(imagePath!);
    } else if (imageLoadType==0) {
      return FileImage(File(imagePath!));
    } else {
      return AssetImage(imagePath!);
    }
  }

  /*
  * 占位图
  * */
  ImageProvider getPlaceholder() {
    return AssetImage(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组件效果页面

class ImagePage extends StatefulWidget {
  const ImagePage({super.key});

  @override
  State<ImagePage> createState()=> _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.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:尺寸常量

class DimenConstant {
  static const double dimen_5=5;
  static const double dimen_10=10;
  static const double dimen_15=15;
  static const double dimen_22=22;
  static const double dimen_44=44;
}

ImageConstant

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

///AUTHOR:AbnerMing
///DATE:2023/5/15
///INTRODUCE:图片地址常量

class ImageConstant {
  static const String imageDefault="images/vip_ic_image_default.png";
}

四、相关总结

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

片处理其实一键渗透到我们的基础工作中，学会对图片的基本处理也是工作基本功。在遇到好看的图片却被拉伸要如何处理？今天给大家介绍一个神奇的网站，在线一键修复拉伸变形图片，处理图像快人一步！

在线工具：图像AI处理：zaixianai-cn/imageHandle

素材准备：变形哪吒图片/拉伸女生图片

1.打开网站，进入“图像AI处理”栏目

打开这个神奇的网站，在线AI转换，然后再打开“图像AI处理”栏目，里面有其他选项，找到“拉伸图片修复”即可。如下图所示：

2.上传图片，开始修复

将准备好的素材，点击“本地上传”，然后网站就会自动开始修复啦。

3.修复完成，点击查看

图片修复过程很快，十几秒的时间，然后就可以自己进行比对。值得注意的是，他的优化前和优化后的图片尺寸在网站上都会被固定尺寸给框柱，所以如果原图片跟网站尺寸不匹配，那么效果可能看不出来，得要下载下来才看清。

4.下载修复好的图片

点击“立即下载”，扫描，网站就会自动下载啦！下面看看修复效果和案例吧！

网站还有语音处理功能，可以参考案例：文字如何在线转成语音？