Flutter控件之图片Image封装

举报
二流小码农 发表于 2023/06/26 17:07:10 2023/06/26
【摘要】 为了简洁代码，还有为了拓展原生组件没有的属性，就不得不进行一次简单的封装，使其在调用的时候，可以很方便的实现某些功能

为什么要进行繁琐的封装？直接用也挺好啊，这个回答一点毛病没有，大部分视图都可以原生绘制，可在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:图片控件

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这些文件，好了铁子们，本篇文章就先到这里，希望可以帮助大家。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Android Flutter Image iOS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入