AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Flutter控件之图片Image封装

2023-07-13 142
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flutter中偏偏原生的控件，少了很多需要又常用的属性，比如宽高，比如内外边距，又比如点击事件，如果不采取封装，视图的结构会一层嵌套一层，徒增很多的冗余代码，所以，为了简洁代码，还有为了拓展原生组件没有的属性，就不得不进行一次简单的封装，使其在调用的时候，可以很方便的实现某些功能。

为什么要进行繁琐的封装？直接用也挺好啊，这个回答一点毛病没有，大部分视图都可以原生绘制，可在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这些文件，好了铁子们，本篇文章就先到这里，希望可以帮助大家。

文章标签：
Android开发
存储
关键词：
Flutter封装
Flutter图片
Flutter控件
Flutter Image
Flutter控件封装
二流小码农
目录
相关文章
旺仔大牛
|
4月前
|
Android开发
Flutter控件的显示与隐藏
Flutter控件的显示与隐藏
旺仔大牛
156 3
lqj_本人
|
28天前
|
存储 缓存 Dart
Flutter&鸿蒙next 封装 Dio 网络请求详解：登录身份验证与免登录缓存
本文详细介绍了如何在 Flutter 中使用 Dio 封装网络请求，实现用户登录身份验证及免登录缓存功能。首先在 `pubspec.yaml` 中添加 Dio 和 `shared_preferences` 依赖，然后创建 `NetworkService` 类封装 Dio 的功能，包括请求拦截、响应拦截、Token 存储和登录请求。最后，通过一个登录界面示例展示了如何在实际应用中使用 `NetworkService` 进行身份验证。希望本文能帮助你在 Flutter 中更好地处理网络请求和用户认证。
lqj_本人
151 1
lqj_本人
|
28天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装：自定义样式与交互
在Flutter应用开发中，按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件，但有时这些样式无法满足特定设计需求。因此，封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性，同时提供更高的灵活性，支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件，并详细说明了其样式、形状、颜色和点击事件的处理方法。
lqj_本人
75 1
lqj_本人
|
28天前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先，通过`flutter create`命令创建项目；接着，在`lib`目录下封装一个自定义输入框组件`CustomInput`；然后，在主应用文件`main.dart`中使用该输入框组件，实现简单的UI布局和功能；最后，通过`flutter run`启动应用。本文还提供了后续扩展建议，如状态管理、网络请求和UI优化。
lqj_本人
100 1
我是快乐的嘟嘟
|
29天前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨，我们可以看出，在 Flutter 中封装 WebView 是非常有必要的，它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中，我们需要根据具体的需求和场景，选择合适的封装方法和技术，以实现更好的效果。
我是快乐的嘟嘟
22 1
你都不懂
|
26天前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
你都不懂
40 0
lqj_本人
|
28天前
|
Dart 安全 UED
Flutter&鸿蒙next中的表单封装：提升开发效率与用户体验
在移动应用开发中，表单是用户与应用交互的重要界面。本文介绍了如何在Flutter中封装表单，以提升开发效率和用户体验。通过代码复用、集中管理和一致性的优势，封装表单组件可以简化开发流程。文章详细讲解了Flutter表单的基础、封装方法和表单验证技巧，帮助开发者构建健壮且用户友好的应用。
lqj_本人
65 0
明弟有理想
|
2月前
|
开发框架 UED 计算机视觉
flutter:图片&stful 生命周期 (三)
本文档介绍了如何在Flutter中处理图片，包括加载网络图片、本地图片、创建圆形图片和带有圆角的图片，以及如何配置`pubspec.yaml`文件来添加资源文件。还展示了如何使用`AssetImage`对象来显示本地资源图片，并通过代码示例详细说明了这些操作的实现方法。最后，简要介绍了StatefulWidget的生命周期。
明弟有理想
16 0
猫哥ducafecat
|
5月前
|
JSON Dart API
Flutter dio http 封装指南说明
本文介绍了如何实现一个通用、可重构的 Dio 基础类,包括单例访问、日志记录、常见操作封装以及请求、输出、报错拦截等功能。
猫哥ducafecat
117 2
Flutter dio http 封装指南说明
旺仔大牛
|
4月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
旺仔大牛
133 1

热门文章

最新文章

  • 1
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 2
    打通前后端逻辑，客户端Flutter代码一天上线
  • 3
    Flutter新锐专家之路：混合开发篇
  • 4
    Flutter Plugin调用Native APIs
  • 5
    从零开始，一起学习开发个 Flutter App 吧
  • 6
    Flutter笔记： 在Flutter应用中使用SQLite数据库
  • 7
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 8
    如何在 Flutter 中使用 MemoryImage【Flutter 专题 23】
  • 9
    Flutter报错Building with plugins requires symlink support的解决方法
  • 10
    【Flutter】Dart 面向对象 ( get 方法 | set 方法 | 静态方法
  • 1
    flutter 引用图片资源遇到的问题
    88
  • 2
    移动应用开发的未来：Flutter与Android的深度融合
    79
  • 3
    Flutter 弃用 WillPopScope 使用 PopScope 替代方法
    279
  • 4
    【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
    82
  • 5
    【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
    279
  • 6
    【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
    215
  • 7
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
    624
  • 8
    【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
    223
  • 9
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
    340
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
    96

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月