Flutter中怎么利用Clipper自定義形狀

今天就跟大家聊聊有關Flutter中怎么利用Clipper自定義形狀，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

ClipOval 圓形裁剪

ClipOval( child: SizedBox(  width: 120.0,  height: 120.0,  child: Image.asset(   Config.assets_avatar_1,  ), ),);

CircleAvatar 圓形頭像

CircleAvatar( radius: 60.0, backgroundImage: AssetImage(  Config.assets_avatar_1, ),);

Container Decoration 裝飾形狀

通過BoxShape.circle實現圓形圖片

Container( width: 120.0, height: 120.0, decoration: BoxDecoration(  shape: BoxShape.circle,  image: DecorationImage(   image: AssetImage(    Config.assets_avatar_1,   ),  ), ))；

通過BorderRadius實現圓形圖片

Container( width: 120.0, height: 120.0, decoration: BoxDecoration(  borderRadius: BorderRadius.all(Radius.circular(60.0)),   image: DecorationImage(    image: AssetImage(     Config.assets_avatar_1,    ),   ), ),)

ClipPath 路徑剪裁

ClipPath( clipper: TriangleClipper(ClipperPosition.LeftTop), child: Container(  width: 16.0,  height: 16.0,  decoration: BoxDecoration(   color: Colors.blue,  ), ),);enum ClipperPosition { LeftTop, RightTop,}class TriangleClipper extends CustomClipper<Path> { final ClipperPosition position; TriangleClipper(this.position); @override Path getClip(Size size) {  final path = Path();  path.lineTo(0.0, 0.0);  if (position == ClipperPosition.LeftTop) {   path.lineTo(size.width, 0.0);   path.lineTo(size.width, size.height);  } else if (position == ClipperPosition.RightTop) {   path.lineTo(size.width, 0.0);   path.lineTo(0.0, size.height);  }  path.close();  return path; } @override bool shouldReclip(CustomClipper oldClipper) {  return false; }}

ClipRect 矩形剪裁

Container( alignment: Alignment.topCenter, color: Colors.transparent, child: Container(  color: Colors.green,  child: ClipRect(   clipper: _RectClipper(20.0),   child: Image.asset(    Config.assets_avatar_1,    width: 160.0,    height: 160.0,    fit: BoxFit.fill,   ),  ), ),);class _RectClipper extends CustomClipper<Rect> { /// Remove side of size final double removeSize;  _RectClipper(this.removeSize);  @override Rect getClip(Size size) {  return new Rect.fromLTRB(   removeSize,   removeSize,   size.width - removeSize,   size.height - removeSize,  ); }  @override bool shouldReclip(CustomClipper<Rect> oldClipper) {  return false; }}

ClipRRect 圓角矩形剪裁

ClipRRect( borderRadius: BorderRadius.all(Radius.circular(16.0)), child: Image.asset(  Config.assets_avatar_1,  fit: BoxFit.fill,  width: 120.0,  height: 120.0, ),);

Star Rating(CustomPaint) 評分控件

評分控件 UI圖

實現方案

使用CustomPaint結合ClipPath畫出單個五角星；

使用Stack渲染兩層畫面  背景層，一排灰色五角星 前景層，一排亮色五角星，并使用ClipRect截取一定Width

實現代碼

class StarRatingDemo extends StatefulWidget { @override _StarRatingDemoState createState() => _StarRatingDemoState();}class _StarRatingDemoState extends State<StarRatingDemo> { /// ClipPath Star Rating _buildClipPathStarRating(double rate, int count) {  return Container(   padding: EdgeInsets.fromLTRB(24.0, 16.0, 24.0, 0.0),   child: StaticRatingBar(    size: 50.0,    rate: rate,    count: count,   ),  ); }  @override Widget build(BuildContext context) {  return Scaffold(   appBar: AppBar(    centerTitle: true,    title: Text('Star Rating'),   ),   body: ListView(    physics: BouncingScrollPhysics(),    children: <Widget>[     // _buildClipPathStarRating(1.0, 1),     _buildClipPathStarRating(0.5, 5),     _buildClipPathStarRating(2.0, 5),     _buildClipPathStarRating(3.0, 5),     _buildClipPathStarRating(4.0, 5),     _buildClipPathStarRating(5.0, 5),     _buildClipPathStarRating(5.5, 6),     SizedBox(height: 16.0),    ],   ),  ); }}class StaticRatingBar extends StatelessWidget { /// Number of stars final int count;  /// Init rate final double rate;  /// Size of the starts final double size;  final Color colorLight;  final Color colorDark;  StaticRatingBar({  this.rate = 5,  this.colorLight = const Color(0xFF1E88E5),  this.colorDark = const Color(0xFFEEEEEE),  this.count = 5,  this.size = 60, });  Widget buildDarkStar() {  return SizedBox(   width: size * count,   height: size,   child: CustomPaint(    painter: _PainterStars(     count: count,     color: colorDark,     strokeWidth: 0.0,     size: this.size / 2,     style: PaintingStyle.fill,    ),   ),  ); }  Widget buildLightStar() {  return ClipRect(   clipper: _RatingBarClipper(rate * size),   child: SizedBox(    height: size,    width: size * count,    child: CustomPaint(     painter: _PainterStars(      count: count,      strokeWidth: 0.0,      color: colorLight,      size: this.size / 2,      style: PaintingStyle.fill,     ),    ),   ),  ); }  @override Widget build(BuildContext context) {  return Stack(   children: <Widget>[    buildDarkStar(),    buildLightStar(),   ],  ); }}class _RatingBarClipper extends CustomClipper<Rect> { final double width;  _RatingBarClipper(this.width);  @override Rect getClip(Size size) {  return Rect.fromLTRB(0.0, 0.0, width, size.height); }  @override bool shouldReclip(_RatingBarClipper oldClipper) {  return false; }}class _PainterStars extends CustomPainter { final double size; final int count; final Color color; final PaintingStyle style; final double strokeWidth;  _PainterStars({  this.size,  this.count,  this.color,  this.strokeWidth,  this.style, }); double degree2Radian(int degree) {  return (pi * degree / 180); } Path createStarPath(double radius, Path path) {  double radian = degree2Radian(36);  double radiusIn = (radius * sin(radian / 2) / cos(radian)) * 1.1;  path.moveTo((radius * cos(radian / 2)), 0.0);  path.lineTo(   (radius * cos(radian / 2) + radiusIn * sin(radian)),   (radius - radius * sin(radian / 2)),  );  path.lineTo(   (radius * cos(radian / 2) * 2),   (radius - radius * sin(radian / 2)),  );  path.lineTo(   (radius * cos(radian / 2) + radiusIn * cos(radian / 2)),   (radius + radiusIn * sin(radian / 2)),  );  path.lineTo(   (radius * cos(radian / 2) + radius * sin(radian)),   (radius + radius * cos(radian)),  );  path.lineTo((radius * cos(radian / 2)), (radius + radiusIn));  path.lineTo(   (radius * cos(radian / 2) - radius * sin(radian)),   (radius + radius * cos(radian)),  );  path.lineTo(   (radius * cos(radian / 2) - radiusIn * cos(radian / 2)),   (radius + radiusIn * sin(radian / 2)),  );  path.lineTo(0.0, (radius - radius * sin(radian / 2)));  path.lineTo(   (radius * cos(radian / 2) - radiusIn * sin(radian)),   (radius - radius * sin(radian / 2)),  );  path.lineTo((radius * cos(radian / 2)), 0.0);  return path; } @override void paint(Canvas canvas, Size size) {  Paint paint = Paint();  paint.strokeWidth = strokeWidth;  paint.color = color;  paint.style = style;  Path path = Path();  double offset = strokeWidth > 0 ? strokeWidth + 2 : 0.0;    path = createStarPath(this.size - offset, path);  for (int i = 0; i < count - 1; i++) {   path = path.shift(Offset(this.size * 2, 0.0));   path = createStarPath(this.size - offset, path);  }   if (offset > 0) {   path = path.shift(Offset(offset, offset));  }  path.close();  canvas.drawPath(path, paint); }  @override bool shouldRepaint(_PainterStars oldDelegate) {  return oldDelegate.size != this.size; }}

看完上述內容，你們對Flutter中怎么利用Clipper自定義形狀有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。