您现在的位置是:首页 > Javascript
当前栏目
Element 系列组件之 EImage 图片组件
2023-04-18 14:48:44 时间
介绍
「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'),
),
)
其他属性和原生保持一致。
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营