Element 系列组件之 EImage 图片组件
老孟Flutter
共 4117字,需浏览 9分钟
· 2021-12-15
介绍
「EImage」 是 「Element」 系列组件中的图片组件,在保留原生Image的特性下,增加了边框、裁剪、自定义占位、加载失败等。
引入
在 「pubspec.yaml」 中依赖
element_ui: ^lastversion
import
import 'package:element_ui/widgets.dart';
基础用法
EImage(
image: AssetImage('assets/images/img_demo.jpeg'),
)
「radius」 : 圆角半径
EImage(
image: AssetImage('assets/images/img_demo.jpeg'),
radius: BorderRadius.all(Radius.circular(12)),
)
也可以指定四角的圆角半径,比如只设置顶部圆角半径:
EImage(
image: AssetImage('assets/images/img_demo.jpeg'),
radius: BorderRadius.vertical(top:Radius.circular(12)),
)
「shape」:图片形状,默认矩形。
「rrect」:圆角矩形。 「circle」:圆形。
EImage(
image: AssetImage('assets/images/img_demo.jpeg'),
shape: ImageShape.circle,
)
「borderWidth」、「borderColor」 表示边框的宽度和颜色。
EImage(
image: AssetImage('assets/images/img_demo.jpeg'),
borderWidth: 3,
borderColor: Colors.red,
)
「clipper」:裁剪路径
EImage(
image: AssetImage('assets/images/img_demo.jpeg'),
clipper: StarPath(),
)
class StarPath extends CustomClipper<Path> {
StarPath({this.scale = 2});
final double scale;
double perDegree = 36;
/// 角度转弧度公式
double degree2Radian(double degree) {
return (pi * degree / 180);
}
@override
Path getClip(Size size) {
var R = min(size.width / 2, size.height / 2);
var r = R / scale;
var x = size.width / 2;
var y = size.height / 2;
var path = Path();
path.moveTo(x, y - R);
path.lineTo(x - sin(degree2Radian(perDegree)) * r,
y - cos(degree2Radian(perDegree)) * r);
path.lineTo(x - sin(degree2Radian(perDegree * 2)) * R,
y - cos(degree2Radian(perDegree * 2)) * R);
path.lineTo(x - sin(degree2Radian(perDegree * 3)) * r,
y - cos(degree2Radian(perDegree * 3)) * r);
path.lineTo(x - sin(degree2Radian(perDegree * 4)) * R,
y - cos(degree2Radian(perDegree * 4)) * R);
path.lineTo(x - sin(degree2Radian(perDegree * 5)) * r,
y - cos(degree2Radian(perDegree * 5)) * r);
path.lineTo(x - sin(degree2Radian(perDegree * 6)) * R,
y - cos(degree2Radian(perDegree * 6)) * R);
path.lineTo(x - sin(degree2Radian(perDegree * 7)) * r,
y - cos(degree2Radian(perDegree * 7)) * r);
path.lineTo(x - sin(degree2Radian(perDegree * 8)) * R,
y - cos(degree2Radian(perDegree * 8)) * R);
path.lineTo(x - sin(degree2Radian(perDegree * 9)) * r,
y - cos(degree2Radian(perDegree * 9)) * r);
path.lineTo(x - sin(degree2Radian(perDegree * 10)) * R,
y - cos(degree2Radian(perDegree * 10)) * R);
return path;
}
@override
bool shouldReclip(StarPath oldClipper) {
return oldClipper.scale != this.scale;
}
}
自定义裁剪也支持边框
EImage(
image: AssetImage('assets/images/img_demo.jpeg'),
borderWidth: 3,
borderColor: Colors.red,
clipper: StarPath(),
)
加载图片过程中显示loading动画:
EImage(
image: NetworkImage(
'http://pic1.win4000.com/wallpaper/2018-06-02/5b1204212b018.jpg'),
loadingBuilder: (context, child, progress) {
if (progress == null) {
return child;
}
return Center(child: CircularProgressIndicator());
},
)
图片加载失败:
EImage(
image: AssetImage('assets/images/img_demo1.jpeg'),
errorWidget: Container(
color: Colors.grey.withOpacity(.3),
alignment: Alignment.center,
child: Text(
'加载失败',
style: TextStyle(color: Colors.white),
),
),
)
全局设置图片占位符和加载失败,「EleTheme」 中设置「imageStyle」属性。
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: EleTheme(
data: EleThemeData(
imageStyle: EImageStyle(
errorWidget: Container(
color: Colors.grey.withOpacity(.3),
alignment: Alignment.center,
child: Text(
'加载失败',
style: TextStyle(color: Colors.white),
),
),
placeholderWidget: Container(
color: Colors.grey.withOpacity(.3),
)),
),
child: NavigatorList(),
),
)
直接使用:
EImage(
radius: BorderRadius.all(Radius.circular(20)),
image: NetworkImage(
'http://pic1.win4000.com/wallpaper/2018-06-02/5b1204212b018.jpg'),
),
)
其他属性和原生保持一致。
评论
Go 1.22 的新增功能系列之二:reflect.TypeFor
Go 1.22 的第一个候选版本已经发布,这意味着最终版本即将发布,现在是我在博客中介绍我在这个周期中所做工作的时候了。像往常一样,我的贡献很小,但它们是我的,所以我将从幕后的角度来谈谈它们。首先是reflect.TypeFor。这是整个函数:// TypeFor returns the [Type
GoCN
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
Go 1.22 的新增功能系列之一:cmp.Or
截至撰写本文时,Go 1.22 已经发布几个月了。早就该结束我为 1.22 所做的工作的系列了。抱歉耽搁了这么久,我最近忙于生活事务。如果您错过了我关于reflect.TypeFor(https://blog.carlana.net/post/2024/golang-reflect-type-for
GoCN
1
面试官:在原生input上面使用v-model和组件上面使用有什么区别?
前言面试官:vue3的v-model都用过吧,来讲讲。粉丝:v-model其实就是一个语法糖,在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值,然后当子组
高级前端进阶
0
全新 SOTA backbone | 2024年了,再见ViT系列Backbone,实数难得,不知道效果如何?
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达在构建用于精确匹配的深度固定长度表示时,确定指纹上的密集特征点,特别是在像素 Level 上,具有重大意义。为了探索指纹匹配的可解释性,作者提出了一种多阶段可解释的指纹匹配网络,名为通过视觉 Transformer 进行指纹匹配的
小白学视觉
10
永久激活GPT4.0 + 多模态(文生图+图片解析)!终身使用!我上车了
GPT 4.0,太牛了🔥!!用GPT4.0生成个代码,轻轻松松就能帮你搞定如果你有想拍视频的想法,或者从事相关新媒体职业,那这个视频脚本生成就很适合你GPT4.0好用是好用,但它的价格也是真贵啊!一个月要 20 美元,折合大概 150 块人民币,一年就是 1800。MJ 绘画更是高攀不起的
Python客栈
0
110 个 Java 主流组件和框架整理,常用的应有尽有,建议收藏!!
点击关注公众号,Java 干货及时推送↓推荐阅读:铜三铁四,怒拿 35K * 14 薪!整理:四猿外以下排序是按照从技术组件到开发框架到代码工具,也有一些实在不好分类的,就放到最后了。WEB 容器Tomcathttps://tomcat.apache.org/Jettyhttps://ww
Java技术栈
0
带你玩转Linux系统之lscpu命令
链接:https://bbs.huaweicloud.com/blogs/422603一、lscpu命令介绍lscpu 是一个 Linux 命令,用于显示CPU架构的详细信息。它可以用来查看 CPU 的型号、主频、架构、虚拟化支持等。二、lscpu命令的使用帮助2.1 命令格式lscpu [选项]2
良许Linux
0