Flutter-实现双向PK进度条

如何实现一个双向PK进度条

在Flutter应用中,进度条是一个非常常见的组件。而双向PK进度条则能够展示两个对立的数值,如对战中的双方得分对比等。本文将介绍如何实现一个具有双向PK效果的进度条,并支持竖直和斜角两种过渡效果。

1. 需求

我们需要一个自定义的双向PK进度条,要求如下:

  • 能够显示两个对立的数值。
  • 进度条两端有圆角。
  • 中间过渡部分可以是竖直或者45度斜角。
  • 支持自定义颜色和高度。

2. 效果

通过我们的实现,可以得到如下效果:

3. 实现思路

  1. 定义组件:创建一个自定义的PKProgressBar组件,包含左右两侧的数值、颜色、高度和过渡类型。
  2. 绘制左侧和右侧的圆角矩形:使用CustomPainter来绘制左右两部分的圆角矩形。
  3. 处理中间过渡部分:根据过渡类型绘制竖直或者45度斜角的过渡效果。

4. 实现代码

下面是实现双向PK进度条的完整代码:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {Widget 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, // 默认过渡类型为斜角});Widget 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,});void 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);}}bool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}
}

在这个实现中,我们通过CustomPainter来自定义绘制PK进度条,并根据过渡类型绘制竖直或斜角的过渡效果。通过这些代码,你可以轻松实现一个具有双向PK效果的进度条,并根据需求调整样式和效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/42151.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FMEA在大型光伏电站安全生产管理中的应用

一、FMEA概述 FMEA(Failure Modes and Effects Analysis)即失效模式和影响分析,是一种用于识别和分析产品或过程中潜在故障模式及其影响的方法。它通过对产品或过程中可能出现的故障模式进行系统性地梳理和分析,评估其可能的影响…

配置Nginx来代理多个Docker微服务组成统一的后台服务

配置Nginx来代理多个Docker微服务组成统一的后台服务可以通过以下步骤完成: 假设情境和准备工作 假设你有多个 Docker 容器,每个容器运行一个微服务,例如: 微服务1: 可以通过 http://localhost:8001 访问微服务2: 可以通过 htt…

并查集[讲课留档]

并查集(DSU) 一些可以实现合并和 查询的 集合。 简洁优雅的树型数据结构,主要用于解决一些元素分组的问题。可以管理一系列不相交的集合,并支持两种操作: 合并(join):把两个不相交…

通过SDK使用百度智能云的图像生成模型SDXL

登录进入百度智能云控制台,在模型广场按照图像生成类别进行筛选,可以找到Stable-Diffusion-XL模型。点击Stable-Diffusion-XL模型的API文档后在弹出的新页面下拉可以找到SDK调用的说明。 import qianfandef sdxl(file: str, prompt: str, steps: int 2…

MySQL——PreparedStatement对象

PreparedStatement可以防止SQL注入,效率更高。 1. 增 public class TestInsert {public static void main(String[] args) throws SQLException {Connection conn null;PreparedStatement ps null;ResultSet rs null;try {conn jdbcUtils.getConnection();// …

矩阵分析与应用1-矩阵代数基础

矩阵分析与应用1-矩阵代数基础 1 矩阵的基本运算2 矩阵的初等变换3 向量空间、线性映射与Hilbert空间4 内积与范数5 随机向量6 矩阵的性能指标7 逆矩阵与伪逆矩阵8 Moore-Penrose逆矩阵9 矩阵的直和与Hadamard积10 Kronecker积与Khatri-Rao积11 向量化与矩阵化12 稀疏表示与压缩…

金丝键合强度测试仪试验条件要求:键合拉脱/引线拉力/剪切力等

金丝键合强度测试仪是测量引线键合强度,评估键合强度分布或测定键合强度是否符合有关的订购文件的要求。键合强度试验机可应用于采用低温焊、热压焊、超声焊或有关技术键合的、具有内引线的器件封装内部的引线-芯片键合、引线-基板键合或内引线一封装引线键合&#…

华为机试HJ23删除字符串中出现次数最少的字符

华为机试HJ23删除字符串中出现次数最少的字符 题目: 实现删除字符串中出现次数最少的字符,若出现次数最少的字符有多个,则把出现次数最少的字符都删除。输出删除这些单词后的字符串,字符串中其它字符保持原来的顺序。 想法&…

第三方商城对接重构(HF202407)

文章目录 项目背景一、模块范围二、问题方案1. 商品模块整体来说这块对接的不是太顺利,梳理了几条大概的思路: 2. 订单模块3. 售后4. 发票5. 结算单 经验总结 项目背景 作为供应商入围第三方商城成功,然后运营了一段时间,第三方通…

PostgreSQL和Mysql的对比

PostgreSQL 是一种功能强大、开源的对象关系型数据库管理系统,广泛用于企业级应用和复杂数据查询。以下是一些关于 PostgreSQL 的基本介绍及其主要特性: 基本介绍 开源和社区支持:PostgreSQL 是一个开源项目,有一个活跃的社区支…

【vue2】记录mounted里面某三个接口调完之后才能执行其他方法的写法

背景 vue2,异步操作并行运行 需求 某个页面现时需要一些接口请求回来的枚举值作为查询条件可供选择,然后将这些查询条件作为入参,请求列表数据。这就造成了我需要先调用枚举值接口,等枚举值接口调用完了,再调查询接…

Docker部署Seata与Nacos整合

本文来自 Apache Seata官方文档,欢迎访问官网,查看更多深度文章。 本文来自 Apache Seata官方文档,欢迎访问官网,查看更多深度文章。 Docker部署Seata与Nacos整合 Docker 部署 Seata 与 Nacos 整合 运行所使用的 demo项目地址 …

提升系统稳定性:熔断、降级和限流策略详解

文章目录 前言一、熔断(Circuit Breaker)二、降级(Degradation)三、限流(Rate Limiting)四、应用案例五、小结推荐阅读 前言 随着互联网业务的快速发展,系统稳定性和高可用性成为现代分布式系统…

RedHat9 | Zabbix-Server监控服务部署

系统版本以及软件版本 使用的系统版本: Red Hat Enterprise Linux release 9.2 软件版本: zabbix-release-7.0-3.el9.noarchzabbix-web-7.0.0-release1.el9.noarchzabbix-web-mysql-7.0.0-release1.el9.noarchzabbix-web-deps-7.0.0-release1.el9.noar…

路径规划之基于二次规划的路径平滑Matlab代码

参考: 自动驾驶决策规划算法第二章第二节(上) 参考线模块_哔哩哔哩_bilibili 自动驾驶决策规划算法第二章第二节(下) 参考线代码实践_哔哩哔哩_bilibili QP函数,二次规划的逻辑 function [smooth_path_x,smooth_path_y] QP(path_x, path_y, w_cost_s…

STM32嵌入式工业机器人控制系统教程

目录 引言环境准备工业机器人控制系统基础代码实现:实现工业机器人控制系统 4.1 数据采集模块 4.2 数据处理与分析 4.3 运动控制系统实现 4.4 用户界面与数据可视化应用场景:工业自动化与优化问题解决方案与优化收尾与总结 1. 引言 工业机器人控制系统…

element表格高度撑开div滚动失效解决方案

描述&#xff1a;当显示区域小于表格列表显示内容时 列表完全撑开表格 无法触发el-table组件的滚动事件 解决&#xff1a;包裹表格的div&#xff0c;加上display: flex;flex-direction: column;即可 <template><div class"table-wrap table-scrollable"&g…

Bahdanau 注意力中上下文变量 ′的公式解释

公式 (10.4.1) 是 Bahdanau 注意力模型中的一个关键公式&#xff0c;用于计算在解码时间步 ( t’ ) 的上下文变量 (\mathbf{c}_{t’})&#xff1a; [ \mathbf{c}{t’} \sum{t1}^T \alpha(\mathbf{s}_{t’ - 1}, \mathbf{h}_t) \mathbf{h}_t ] 下面对公式进行详细解释&#x…

【pytorch18】Logistic Regression

回忆线性回归 for continuous:y xwbfor probability output:yσ(xwb) σ:sigmoid or logistic 线性回归是简单的线性模型&#xff0c;输入是x&#xff0c;网络参数是w和b&#xff0c;输出是连续的y的值 如何把它转化为分类问题?加了sigmoid函数&#xff0c;输出的值不再是…

开闭原则的简单总结

简介 开闭原则指的是软件实体(类、模块、函数等)应该对扩展开放,对修改关闭。这意味着: 对扩展开放:当需要新增功能时,可以通过添加新的代码来实现,而不是修改现有代码。对修改关闭:已经存在的、经过测试的代码不应该被修改。 优缺点 优点: 提高代码的可维护性和复用性降低…