Element 系列組件之 EImage 圖片組件

介紹

「EImage」 是 「Element」 系列組件中的圖片組件，在保留原生Image的特性下，增加了邊框、裁剪、自定義占位、加載失敗等。

引入

1. 在 「pubspec.yaml」 中依賴

   element_ui:?^lastversion
   

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

圖片加載失?。?/p>

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'),
??),
)

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