Element 系列组件之 EImage 图片组件
介绍
「EImage」 是 「Element」 系列组件中的图片组件，在保留原生Image的特性下，增加了边框、裁剪、自定义占位、加载失败等。
引入
在 「pubspec.yaml」 中依赖
element_ui: ^lastversionimport
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'),
),
)
其他属性和原生保持一致。
评论