时间:2021-05-20
本文介绍了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画出单个五角星;
实现代码
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; }}代码地址
https://github.com/smiling1990/FlutterClipper
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在上一篇文章:Flutter进阶—实现动画效果(二)的最后,我们实现了一个控件,其中包含各种布局和状态处理控件。以及使用自定义的动画感知绘图代码绘制单个Bar的
本文实例讲述了JS实现的自定义右键菜单。分享给大家供大家参考。具体如下:示例1:运行效果截图:具体代码如下:JS实现自定义右键菜单#container{text
这篇文章主要介绍了Java如何实现自定义异常类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下自定义异常类步骤
为了实现自定义的Menu和ContextMenu效果,下面演示代码通过派生ProfessionalColorTable类,在自定义的类中重写Profession
JS代码实现自定义热键实现功能:1.自定义上下左右键2.使用自定义热键或者使用键盘上下左右键移动图片效果图:步骤1:HTML代码:使用自定义按键实现图片移动ta