简介
🌟 核心特性
- 多源图片加载：支持网络图片、本地文件、Asset 资源、SVG 图片
- 丰富样式配置：圆角、边框、阴影、透明度、缩放模式等
- 图片预览功能：支持双击缩放、手势平移、图片预览弹窗
- 易用性高：简洁 API 设计，丰富快捷构造方法
快速上手
导入头文件
import 'package:easy_imagekit/easy_imagekit.dart';
多种初始化方式
EasyImage(''), // 推荐 自动识别图片类型
EasyImage.asset(''),
EasyImage.network(''),
EasyImage.base64(''),
EasyImage.circle(''),
EasyImage.source(source: ImageSource.network('url')),
样式说明
| 样式分类 |
参数名 |
作用描述 |
数据类型 |
默认值 |
备注说明 |
| 基础尺寸控制 |
width |
图片固定宽度 |
double? |
null（自适应父容器） |
优先级：固定宽高 > 最大宽高限制 > 自适应 |
|
height |
图片固定高度 |
double? |
null（自适应父容器） |
|
|
maxWidth |
图片最大宽度（超出自动等比缩放） |
double? |
double.infinity |
仅当图片原始宽度超过该值时生效 |
|
maxHeight |
图片最大高度（超出自动等比缩放） |
double? |
double.infinity |
仅当图片原始高度超过该值时生效 |
| 圆角与裁剪 |
borderRadius |
统一设置四个角的圆角大小 |
double |
0（无圆角） |
优先级低于 borderRadiusGeometry 和 isCircle |
|
borderRadiusGeometry |
自定义单个角的圆角大小（支持不规则圆角） |
BorderRadiusGeometry? |
null |
示例：BorderRadius.only(topLeft: Radius.circular(20)) |
|
isCircle |
开启圆形裁剪（自动适配宽高） |
bool |
false |
优先级最高，会覆盖圆角设置（需保证宽高相等，否则显示为椭圆） |
|
clipBehavior |
裁剪行为（控制裁剪边缘抗锯齿等） |
Clip |
Clip.hardEdge |
可选值：hardEdge（高效）、antiAlias（抗锯齿）、antiAliasWithSaveLayer（高质量） |
| 边框样式 |
border |
图片边框（支持颜色、宽度、样式自定义） |
BoxBorder? |
null（无边框） |
示例：Border.all(color: Colors.red, width: 2, style: BorderStyle.solid) |
| 阴影效果 |
boxShadow |
图片阴影（支持多个阴影叠加） |
List<BoxShadow>? |
null（无阴影） |
可配置阴影颜色、模糊度、扩散范围、偏移量 |
| 背景相关 |
backgroundColor |
图片背景色（图片加载前/图片透明区域显示） |
Color? |
null |
适配占位图、透明图片场景 |
| 颜色滤镜 |
color |
覆盖图片颜色（整体染色效果） |
Color? |
null（保留原图颜色） |
需配合 colorBlendMode 使用以达到最佳效果 |
|
colorBlendMode |
颜色混合模式（控制染色与原图的混合方式） |
BlendMode? |
null |
常用值：srcIn（图标染色）、colorOverlay（颜色叠加）、softLight（柔光） |
| 透明度控制 |
opacity |
图片整体透明度 |
double |
1.0（完全不透明） |
取值范围：0.0（完全透明）~ 1.0（完全不透明） |
| 图片渲染 |
fit |
图片填充模式（避免拉伸/裁剪） |
BoxFit |
BoxFit.cover |
常用值：cover（填充裁剪）、contain（完整显示）、fill（拉伸填充） |
|
alignment |
图片在容器内的对齐方式 |
Alignment |
Alignment.center |
示例：Alignment.topLeft（左上对齐）、Alignment.bottomRight（右下对齐） |
|
repeat |
图片重复模式（仅当图片尺寸小于容器时生效） |
ImageRepeat |
ImageRepeat.noRepeat |
可选值：repeat（双向重复）、repeatX（水平重复）、repeatY（垂直重复） |
| 高级滤镜 |
imageFilter |
图片滤镜（高斯模糊、旋转、透视等） |
ImageFilter? |
null（无滤镜） |
示例：ImageFilter.blur(sigmaX: 5, sigmaY: 5)（高斯模糊） |
| 占位图/错误图 |
placeholderColor |
默认占位图的背景色 |
Color? |
Colors.grey[200] |
仅在未自定义 placeholder 时生效 |
|
errorColor |
默认错误图的背景色 |
Color? |
Colors.grey[100] |
仅在未自定义 errorWidget 时生效 |
