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