From cfbad3d75076c5a35b9e14d7563b3ee5db165736 Mon Sep 17 00:00:00 2001 From: laiiihz Date: Tue, 29 Dec 2020 16:41:06 +0800 Subject: [PATCH] add progress painter --- lib/pages/user/user_page.dart | 2 + lib/pages/user/widget/shop_check_painter.dart | 149 ++++++++++++++++++ lib/pages/user/widget/shop_check_view.dart | 34 ++++ 3 files changed, 185 insertions(+) create mode 100644 lib/pages/user/widget/shop_check_painter.dart create mode 100644 lib/pages/user/widget/shop_check_view.dart diff --git a/lib/pages/user/user_page.dart b/lib/pages/user/user_page.dart index 1a083c8..1eb8ab8 100644 --- a/lib/pages/user/user_page.dart +++ b/lib/pages/user/user_page.dart @@ -31,6 +31,7 @@ import 'package:recook/pages/user/widget/order_central_view.dart'; import 'package:recook/pages/user/widget/other_item_view.dart'; import 'package:recook/pages/user/widget/other_item_view_v2.dart'; import 'package:recook/pages/user/widget/shop_benifit_view.dart'; +import 'package:recook/pages/user/widget/shop_check_view.dart'; import 'package:recook/pages/user/widget/shop_manager_view.dart'; import 'package:recook/pages/user/widget/user_app_bar.dart'; import 'package:recook/pages/user/widget/user_app_bar_v2.dart'; @@ -194,6 +195,7 @@ class _UserPageState extends BaseStoreState { ), UserPageAssetsView(), ShopBenifitView(), + ShopCheckView(), ShopManagerView(), OrderCentralView( clickListener: (int index) { diff --git a/lib/pages/user/widget/shop_check_painter.dart b/lib/pages/user/widget/shop_check_painter.dart new file mode 100644 index 0000000..caf4416 --- /dev/null +++ b/lib/pages/user/widget/shop_check_painter.dart @@ -0,0 +1,149 @@ +import 'dart:math'; +import 'dart:ui'; + +import 'package:flutter/material.dart'; + +class ShopCheckPainter extends CustomPainter { + ///圆环开始颜色 + final Color beginColor; + + ///圆环结束颜色 + final Color endColor; + + ///边框颜色 + final Color themeColor; + + ///进度 + final double percentage; + + ///圆环开始颜色 + /// final Color beginColor; + /// + ///圆环结束颜色 + ///final Color endColor; + /// + ///边框颜色 + ///final Color themeColor; + /// + ///进度 + ///final double percentage; + ShopCheckPainter({ + @required this.beginColor, + @required this.endColor, + @required this.themeColor, + this.percentage = 0, + }); + + double get percentValue => percentage / 100.0; + + bool get done => percentage == 100.0; + + _drawCircle(Canvas canvas, double radius) { + Paint paint = Paint() + ..color = themeColor + ..style = PaintingStyle.stroke + ..strokeWidth = 0.5; + //Circle Inner Painter + Paint innerPaint = Paint() + ..color = Color(0xFFF8F9FB) + ..style = PaintingStyle.stroke + ..strokeWidth = 4; + canvas.drawCircle(Offset(radius, radius), radius - 2.5, innerPaint); + canvas.drawCircle(Offset(radius, radius), radius - 5, paint); + canvas.drawCircle(Offset(radius, radius), radius, paint); + } + + _drawProgress(Canvas canvas, double radius) { + Paint paint = Paint() + ..style = PaintingStyle.stroke + ..strokeCap = StrokeCap.round + ..strokeWidth = 4 + ..shader = SweepGradient( + colors: [ + beginColor, + endColor, + ], + stops: [0, percentValue], + transform: GradientRotation(-pi / 2), + ).createShader(Rect.fromCircle( + center: Offset(radius, radius), + radius: radius - 2.5, + )); + canvas.drawArc( + Rect.fromCircle( + center: Offset(radius, radius), + radius: radius - 2.5, + ), + -pi / 2, + 2 * pi * percentValue, + false, + paint, + ); + } + + _drawTagBackground(Canvas canvas, double radius) { + Paint paint = Paint() + ..color = endColor + ..strokeWidth = 8 + ..strokeCap = StrokeCap.round; + + canvas.drawPoints(PointMode.points, [Offset(radius, 2.5)], paint); + } + + _buildUpgradeTag(Canvas canvas, double radius) { + Paint iconPaint = Paint() + ..color = Colors.white + ..strokeWidth = 1 + ..style = PaintingStyle.stroke + ..strokeCap = StrokeCap.round; + canvas.drawLine(Offset(radius, 5), Offset(radius, 0.5), iconPaint); + canvas.drawLine(Offset(radius - 2, 2.7), Offset(radius, 0.5), iconPaint); + canvas.drawLine(Offset(radius + 2, 2.7), Offset(radius, 0.5), iconPaint); + } + + _buildDownTag(Canvas canvas, double radius) { + Paint paint = Paint() + ..color = Colors.white + ..strokeWidth = 1 + ..style = PaintingStyle.stroke + ..strokeCap = StrokeCap.round; + canvas.drawLine( + Offset(radius - 2.5, 2.5), Offset(radius + 2.5, 2.5), paint); + } + + _drawArrow(Canvas canvas, double radius, double rotate) { + Paint paint = Paint() + ..color = endColor + ..strokeWidth = 3 + ..style = PaintingStyle.stroke + ..strokeCap = StrokeCap.round; + var headlen = 7; // length of head in pixels + double pointX = radius - (radius - 2.5) * cos(pi); + double pointY = radius + (radius - 2.5) * sin(pi); + Path path = Path(); + path.moveTo(pointX, pointY); + path.lineTo(pointX - headlen * cos(rotate - pi / 4), + pointY - headlen * sin(rotate - pi / 4)); + path.moveTo(pointX, pointY); + path.lineTo(pointX - headlen * cos(rotate + pi / 4), + pointY - headlen * sin(rotate + pi / 4)); + canvas.drawPath(path, paint); + } + + @override + void paint(Canvas canvas, Size size) { + final radius = size.width / 2; + // Circle Border Painter + _drawCircle(canvas, radius); + _drawProgress(canvas, radius); + _drawTagBackground(canvas, radius); + done ? _buildDownTag(canvas, radius) : _buildUpgradeTag(canvas, radius); + _drawArrow(canvas, radius, percentValue * 2 * pi); + } + + @override + bool shouldRepaint(ShopCheckPainter oldDelegate) => false; + + @override + bool shouldRebuildSemantics(ShopCheckPainter oldDelegate) => false; +} diff --git a/lib/pages/user/widget/shop_check_view.dart b/lib/pages/user/widget/shop_check_view.dart new file mode 100644 index 0000000..1cf5cc8 --- /dev/null +++ b/lib/pages/user/widget/shop_check_view.dart @@ -0,0 +1,34 @@ +import 'package:flutter/material.dart'; +import 'package:recook/pages/user/widget/shop_check_painter.dart'; +import 'package:velocity_x/velocity_x.dart'; +import 'package:recook/constants/constants.dart'; + +class ShopCheckView extends StatefulWidget { + ShopCheckView({Key key}) : super(key: key); + + @override + _ShopCheckViewState createState() => _ShopCheckViewState(); +} + +class _ShopCheckViewState extends State { + @override + Widget build(BuildContext context) { + return VxBox( + child: Column( + children: [ + Container( + height: 68.w, + width: 68.w, + child: CustomPaint( + painter: ShopCheckPainter( + themeColor: Color(0xFFE2B56B).withOpacity(0.5), + beginColor: Color(0xFFECD5A7), + endColor: Color(0xFFE0AE5C), + percentage: 25.0, + ), + ), + ), + ], + )).color(Colors.white).margin(EdgeInsets.only(bottom: 10)).make(); + } +}