Element 系列组件之 EImage 图片组件

介绍

「EImage」 是 「Element」 系列组件中的图片组件，在保留原生Image的特性下，增加了边框、裁剪、自定义占位、加载失败等。

引入

在 「pubspec.yaml」 中依赖

代码语言：javascript复制

element_ui: ^lastversion

import

代码语言：javascript复制

import 'package:element_ui/widgets.dart';

基础用法

代码语言：javascript复制

EImage(
  image: AssetImage('assets/images/img_demo.jpeg'),
)

「radius」 : 圆角半径

代码语言：javascript复制

EImage(
  image: AssetImage('assets/images/img_demo.jpeg'),
  radius: BorderRadius.all(Radius.circular(12)),
)

也可以指定四角的圆角半径，比如只设置顶部圆角半径：

代码语言：javascript复制

 EImage(
  image: AssetImage('assets/images/img_demo.jpeg'),
  radius: BorderRadius.vertical(top:Radius.circular(12)),
)

「shape」：图片形状，默认矩形。

• 「rrect」：圆角矩形。
• 「circle」：圆形。

代码语言：javascript复制

EImage(
  image: AssetImage('assets/images/img_demo.jpeg'),
  shape: ImageShape.circle,
)

「borderWidth」、「borderColor」 表示边框的宽度和颜色。

代码语言：javascript复制

EImage(
  image: AssetImage('assets/images/img_demo.jpeg'),
  borderWidth: 3,
  borderColor: Colors.red,
)

「clipper」：裁剪路径

代码语言：javascript复制

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;
  }
}

自定义裁剪也支持边框

代码语言：javascript复制

EImage(
  image: AssetImage('assets/images/img_demo.jpeg'),
  borderWidth: 3,
  borderColor: Colors.red,
  clipper: StarPath(),
)

加载图片过程中显示loading动画：

代码语言：javascript复制

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());
  },
)

图片加载失败：

代码语言：javascript复制

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」属性。

代码语言：javascript复制

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(),
  ),
)

直接使用：

代码语言：javascript复制

EImage(
    radius: BorderRadius.all(Radius.circular(20)),
    image: NetworkImage(
        'http://pic1.win4000.com/wallpaper/2018-06-02/5b1204212b018.jpg'),
  ),
)

其他属性和原生保持一致。

border image import loading yaml

0 人点赞