古风网站的关于我们页面怎么做,房地产最新消息2022,推广分享,检测网站死链如何实现一个双向PK进度条
在Flutter应用中#xff0c;进度条是一个非常常见的组件。而双向PK进度条则能够展示两个对立的数值#xff0c;如对战中的双方得分对比等。本文将介绍如何实现一个具有双向PK效果的进度条#xff0c;并支持竖直和斜角两种过渡效果。
1. 需求
我…如何实现一个双向PK进度条
在Flutter应用中进度条是一个非常常见的组件。而双向PK进度条则能够展示两个对立的数值如对战中的双方得分对比等。本文将介绍如何实现一个具有双向PK效果的进度条并支持竖直和斜角两种过渡效果。
1. 需求
我们需要一个自定义的双向PK进度条要求如下
能够显示两个对立的数值。进度条两端有圆角。中间过渡部分可以是竖直或者45度斜角。支持自定义颜色和高度。
2. 效果
通过我们的实现可以得到如下效果 3. 实现思路
定义组件创建一个自定义的PKProgressBar组件包含左右两侧的数值、颜色、高度和过渡类型。绘制左侧和右侧的圆角矩形使用CustomPainter来绘制左右两部分的圆角矩形。处理中间过渡部分根据过渡类型绘制竖直或者45度斜角的过渡效果。
4. 实现代码
下面是实现双向PK进度条的完整代码
import package:flutter/material.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text(双向PK进度条)),body: const Center(child: Padding(padding: EdgeInsets.symmetric(horizontal: 16),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [PKProgressBar(leftValue: 75,rightValue: 150,leftColor: Colors.blue,rightColor: Colors.red,height: 20,transitionType: TransitionType.diagonal, // 设置过渡类型为斜角),SizedBox(height: 50),PKProgressBar(leftValue: 90,rightValue: 55,leftColor: Colors.brown,rightColor: Colors.green,height: 20,transitionType: TransitionType.vertical, // 设置过渡类型为竖直),],),)),),);}
}// 定义过渡类型枚举
enum TransitionType { vertical, diagonal }class PKProgressBar extends StatelessWidget {final double leftValue;final double rightValue;final Color leftColor;final Color rightColor;final double height;final TransitionType transitionType;const PKProgressBar({super.key,required this.leftValue,required this.rightValue,required this.leftColor,required this.rightColor,this.height 20.0,this.transitionType TransitionType.diagonal, // 默认过渡类型为斜角});overrideWidget build(BuildContext context) {return CustomPaint(size: Size(double.infinity, height),painter: PKProgressPainter(leftValue: leftValue,rightValue: rightValue,leftColor: leftColor,rightColor: rightColor,transitionType: transitionType,),);}
}class PKProgressPainter extends CustomPainter {final double leftValue;final double rightValue;final Color leftColor;final Color rightColor;final TransitionType transitionType;PKProgressPainter({required this.leftValue,required this.rightValue,required this.leftColor,required this.rightColor,required this.transitionType,});overridevoid paint(Canvas canvas, Size size) {final paint Paint()..style PaintingStyle.fill;final double totalValue leftValue rightValue;final double leftWidth (leftValue / totalValue) * size.width;final double rightWidth (rightValue / totalValue) * size.width;final double radius size.height / 2;// 左侧带圆角的矩形final leftRRect RRect.fromLTRBAndCorners(0,0,leftWidth,size.height,topLeft: Radius.circular(radius),bottomLeft: Radius.circular(radius),);// 右侧带圆角的矩形final rightRRect RRect.fromLTRBAndCorners(leftWidth,0,size.width,size.height,topRight: Radius.circular(radius),bottomRight: Radius.circular(radius),);// 绘制左侧部分paint.color leftColor;canvas.drawRRect(leftRRect, paint);// 绘制右侧部分paint.color rightColor;canvas.drawRRect(rightRRect, paint);// 根据过渡类型绘制中间部分if (transitionType TransitionType.vertical) {// 竖直过渡final middleRect Rect.fromLTWH(leftWidth - radius,0,2 * radius,size.height,);paint.color rightColor;canvas.drawRect(middleRect, paint);} else if (transitionType TransitionType.diagonal) {// 斜角过渡形成45度斜线final leftPath Path()..moveTo(leftWidth - size.height / 2, 0)..lineTo(leftWidth size.height / 2, size.height)..lineTo(leftWidth - size.height / 2, size.height)..close();paint.color leftColor;canvas.drawPath(leftPath, paint);// 斜角过渡形成45度斜线final rightPath Path()..moveTo(leftWidth - size.height / 2, 0)..lineTo(leftWidth, 0)..lineTo(leftWidth, size.height)..close();paint.color rightColor;canvas.drawPath(rightPath, paint);}}overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}
}在这个实现中我们通过CustomPainter来自定义绘制PK进度条并根据过渡类型绘制竖直或斜角的过渡效果。通过这些代码你可以轻松实现一个具有双向PK效果的进度条并根据需求调整样式和效果。
