环形进度条

小丑不冷

已于 2022-11-17 14:17:51 修改

阅读量754

点赞数 1

分类专栏： PyQt5 Python 文章标签： python

于 2022-11-16 20:02:56 首次发布

本文链接：https://blog.youkuaiyun.com/hyd_csdn/article/details/127892073

版权

PyQt5 同时被 2 个专栏收录

29 篇文章

订阅专栏

Python

27 篇文章

订阅专栏

该博客介绍了如何使用QtDesigner设计一个环形进度条，并将其转换为Python代码。作者展示了如何通过QtDesigner生成的ui文件，并在Python中实现加载和显示。文章详细解释了代码结构，包括进度条的样式设置、动画效果以及文字信息的更新。此外，还提供了一个名为`splashmain.py`的入口文件来调用和展示进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环形进度条

本文主要使用Qt Designer设计并使用其转换Python代码功能将其转换成了代码。
通过Python调用，将设计的代码进行显示。
splash_screen.py Ui文件,可在Qt Designer加载
Ui文件：https://download.youkuaiyun.com/download/hyd_csdn/87038253

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'splash_screen.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PySide6 import QtCore, QtGui, QtWidgets

class Ui_SplashScreen(object):
    def setupUi(self, SplashScreen):
        SplashScreen.setObjectName("SplashScreen")
        SplashScreen.resize(340, 340)
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        SplashScreen.setFont(font)
        self.centralwidget = QtWidgets.QWidget(SplashScreen)
        self.centralwidget.setObjectName("centralwidget")
        self.circularProgressBarBase = QtWidgets.QFrame(self.centralwidget)
        self.circularProgressBarBase.setGeometry(QtCore.QRect(10, 10, 320, 320))
        self.circularProgressBarBase.setFrameShape(QtWidgets.QFrame.NoFrame)
        self.circularProgressBarBase.setFrameShadow(QtWidgets.QFrame.Raised)
        self.circularProgressBarBase.setObjectName("circularProgressBarBase")
        self.circularProgress = QtWidgets.QFrame(self.circularProgressBarBase)
        self.circularProgress.setGeometry(QtCore.QRect(10, 10, 300, 300))
        self.circularProgress.setStyleSheet("QFrame{\n"
"    \n"
"    border-radius: 150px;\n"
"    background-color: qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:0.749 rgba(255, 0, 127, 0), stop:0.750 rgba(85, 170, 255, 255));\n"
"}")
        self.circularProgress.setFrameShape(QtWidgets.QFrame.NoFrame)
        self.circularProgress.setFrameShadow(QtWidgets.QFrame.Raised)
        self.circularProgress.setObjectName("circularProgress")
        self.circularBg = QtWidgets.QFrame(self.circularProgressBarBase)
        self.circularBg.setGeometry(QtCore.QRect(10, 10, 300, 300))
        self.circularBg.setStyleSheet("QFrame{\n"
"    border-radius:150px;\n"
"    background-color: rgba(77, 77, 127, 120);\n"
"\n"
"\n"
"}")
        self.circularBg.setFrameShape(QtWidgets.QFrame.NoFrame)
        self.circularBg.setFrameShadow(QtWidgets.QFrame.Raised)
        self.circularBg.setObjectName("circularBg")
        self.container = QtWidgets.QFrame(self.circularProgressBarBase)
        self.container.setGeometry(QtCore.QRect(25, 25, 270, 270))
        self.container.setStyleSheet("QFrame{\n"
"    border-radius:135px;\n"
"    background-color: rgb(77, 77, 127);\n"
"\n"
"\n"
"}")
        self.container.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.container.setFrameShadow(QtWidgets.QFrame.Raised)
        self.container.setObjectName("container")
        self.widget = QtWidgets.QWidget(self.container)
        self.widget.setGeometry(QtCore.QRect(40, 40, 193, 194))
        self.widget.setObjectName("widget")
        self.gridLayout = QtWidgets.QGridLayout(self.widget)
        self.gridLayout.setContentsMargins(0, 0, 0, 0)
        self.gridLayout.setObjectName("gridLayout")
        self.labelTitle = QtWidgets.QLabel(self.widget)
        font = QtGui.QFont()
        font.setFamily("Segoe UI")
        font.setPointSize(12)
        self.labelTitle.setFont(font)
        self.labelTitle.setStyleSheet("background-color: none;\n"
"color:#FFFFFF")
        self.labelTitle.setAlignment(QtCore.Qt.AlignCenter)
        self.labelTitle.setObjectName("labelTitle")
        self.gridLayout.addWidget(self.labelTitle, 0, 0, 1, 1)
        self.labelPercentage = QtWidgets.QLabel(self.widget)
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(68)
        self.labelPercentage.setFont(font)
        self.labelPercentage.setStyleSheet("background-color: none;\n"
"color:#FFFFFF")
        self.labelPercentage.setAlignment(QtCore.Qt.AlignCenter)
        self.labelPercentage.setObjectName("labelPercentage")
        self.gridLayout.addWidget(self.labelPercentage, 1, 0, 1, 1)
        self.labelLoadingInfo = QtWidgets.QLabel(self.widget)
        self.labelLoadingInfo.setMinimumSize(QtCore.QSize(0, 20))
        self.labelLoadingInfo.setMaximumSize(QtCore.QSize(16777215, 20))
        font = QtGui.QFont()
        font.setFamily("Segoe UI")
        font.setPointSize(9)
        self.labelLoadingInfo.setFont(font)
        self.labelLoadingInfo.setStyleSheet("QLabel{\n"
"    border-radius:10px;\n"
"    background-color: rgb(93,93,154);\n"
"    color:#FFFFFF;\n"
"    margin-left:40px;\n"
"    margin-right:40px;\n"
"}")
        self.labelLoadingInfo.setAlignment(QtCore.Qt.AlignCenter)
        self.labelLoadingInfo.setObjectName("labelLoadingInfo")
        self.gridLayout.addWidget(self.labelLoadingInfo, 2, 0, 1, 1)
        self.labelCredits = QtWidgets.QLabel(self.widget)
        self.labelCredits.setMinimumSize(QtCore.QSize(0, 20))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(9)
        self.labelCredits.setFont(font)
        self.labelCredits.setStyleSheet("background-color: none;\n"
"color: rgb(155, 155, 255);")
        self.labelCredits.setAlignment(QtCore.Qt.AlignCenter)
        self.labelCredits.setObjectName("labelCredits")
        self.gridLayout.addWidget(self.labelCredits, 3, 0, 1, 1)
        self.circularBg.raise_()
        self.circularProgress.raise_()
        self.container.raise_()
        SplashScreen.setCentralWidget(self.centralwidget)

        self.retranslateUi(SplashScreen)
        QtCore.QMetaObject.connectSlotsByName(SplashScreen)

    def retranslateUi(self, SplashScreen):
        _translate = QtCore.QCoreApplication.translate
        SplashScreen.setWindowTitle(_translate("SplashScreen", "MainWindow"))
        self.labelTitle.setText(_translate("SplashScreen", "<html><head/><body><p><span style=\" font-weight:600; color:#9b9bff;\">YOUR </span>APPLICATION NAME</p></body></html>"))
        self.labelPercentage.setText(_translate("SplashScreen", "<p><span style=\" font-size:68pt;\">0</span><span style=\" font-size:58pt; vertical-align:super;\">%</span></p>"))
        self.labelLoadingInfo.setText(_translate("SplashScreen", "Loading..."))
        self.labelCredits.setText(_translate("SplashScreen", "by: From Kevin"))

splash main.py 调用入口


#!/usr/bin/env python
# -*- coding: utf-8 -*-
# Time : 2022/11/15 15:23
# Author : kevin
# Software: PyCharm
# File : splash main.py
import sys
from PySide6 import QtCore, QtGui, QtWidgets
from PySide6.QtGui import (QBrush, QColor, QConicalGradient, QCursor, QFont, QFontDatabase, QIcon, QKeySequence, QLinearGradient, QPalette, QPainter, QPixmap, QRadialGradient)
from PySide6.QtWidgets import *
from splash_screen import Ui_SplashScreen


counter = 0
jumper = 0


class MainWindow(QMainWindow):


    def __init__(self):
        QMainWindow.__init__(self)
        self.ui = Ui_SplashScreen()
        self.ui.setupUi(self)

        # 设置进度初始值为0
        self.progressBarValue(0)

        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)  # 去掉标题栏及外框
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)  # 去掉背景

        # 应用投影效果(没懂）
        self.shadow = QGraphicsDropShadowEffect(self)
        self.shadow.setBlurRadius(20)
        self.shadow.setXOffset(0)
        self.shadow.setYOffset(0)
        self.shadow.setColor(QColor(0, 0, 0, 120))
        self.ui.circularBg.setGraphicsEffect(self.shadow)

        ## 计时器开始 ==> 结束
        self.timer = QtCore.QTimer()
        self.timer.timeout.connect(self.progress)
        # 计时器以毫秒为单位
        self.timer.start(10)



        # self.progressBarValue(75)  # 设置环形进度条的值
        self.show()  # 显示
        ## DEF TO LOANDING
        ########################################################################
    def progress(self):
        global counter
        global jumper
        value = counter

        # HTML TEXT PERCENTAGE
        hemlText = """<p><span style=" font-size:68pt;">{VALUE}</span><span style=" font-size:58pt; vertical-align:super;">%</span></p>"""
        newHtml = hemlText.replace("{VALUE}", str(int(value)))

        if(value > jumper):
            self.ui.labelPercentage.setText(newHtml)
            jumper += 10

        if value >= 100: value = 100
        self.progressBarValue(value)

        if counter > 100:
            self.timer.stop()
            # self.close() # 进行到100%自动关闭
        counter += 0.1  # 调整值增加速度

    def progressBarValue(self, value):  # 传参到控件中
        stylesheet = """
        QFrame{
        	border-radius: 150px;
        	background-color: qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:{STOP_1} rgba(255, 0, 127, 0), stop:{STOP_2} {num1});
        }
        """  # 设置控件样式

        #todo 用这个进度条颜色是固定的
        ''' 
        stylesheet = """
        QFrame{
        	border-radius: 150px;
        	background-color: qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:{STOP_1} rgba(255, 0, 127, 0), stop:{STOP_2} rgba(85, 170, 255, 255));
        }
        '''

        # todo 计算控件的值
        progress = (100 - value) / 100.0

        # GET NEW VALUES
        stop_1 = str(progress - 0.001)
        stop_2 = str(progress)

        # 颜色由红转绿。 透明度由大到小。 value+80是为了刚开始不至于看不到颜色
        num = str("rgba(%s, %s, 0, %s)" % (255-int(value * 2), int(value * 2), int((value+80) * 1.4)))
        #  print(num)   # 调试查看色值
        newstylesheet = stylesheet.replace("{STOP_1}", stop_1).replace("{STOP_2}", stop_2).replace("{num1}", num)

        self.ui.circularProgress.setStyleSheet(newstylesheet)  # 设置控件值



if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()