From 2fbd0f4f20eb0aa258304755ab77659f225a5b1d Mon Sep 17 00:00:00 2001 From: Irony <892768447@qq.com> Date: Tue, 15 May 2018 18:00:00 +0800 Subject: [PATCH] =?UTF-8?q?QSlider=E7=BE=8E=E5=8C=96=20=E7=BC=96=E5=86=99?= =?UTF-8?q?=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .settings/org.eclipse.core.resources.prefs | 2 + 界面美化/QSlider美化/PaintQSlider.py | 113 +++++++++++++++++++++ 界面美化/QSlider美化/QssQSlider.py | 84 +++++++++++++++ 界面美化/QSlider美化/README.md | 10 ++ 4 files changed, 209 insertions(+) create mode 100644 界面美化/QSlider美化/PaintQSlider.py create mode 100644 界面美化/QSlider美化/QssQSlider.py create mode 100644 界面美化/QSlider美化/README.md diff --git a/.settings/org.eclipse.core.resources.prefs b/.settings/org.eclipse.core.resources.prefs index ce3effb..404e3ce 100644 --- a/.settings/org.eclipse.core.resources.prefs +++ b/.settings/org.eclipse.core.resources.prefs @@ -71,6 +71,8 @@ encoding//\u754C\u9762\u7F8E\u5316/QPushButton\u8FDB\u5EA6\u52A8\u753B/PushButto encoding//\u754C\u9762\u7F8E\u5316/QSS\u7F8E\u5316\u4F8B\u5B50/QProgressBar\u8FDB\u5EA6\u6761\u6837\u5F0F/ProgressBar.py=utf-8 encoding//\u754C\u9762\u7F8E\u5316/QSS\u7F8E\u5316\u4F8B\u5B50/QPushButton\u6309\u94AE/ButtonHover.py=utf-8 encoding//\u754C\u9762\u7F8E\u5316/QScrollBar\u6EDA\u52A8\u6761\u6837\u5F0F/ScrollBar.py=utf-8 +encoding//\u754C\u9762\u7F8E\u5316/QSlider\u7F8E\u5316/PaintQSlider.py=utf-8 +encoding//\u754C\u9762\u7F8E\u5316/QSlider\u7F8E\u5316/QssQSlider.py=utf-8 encoding//\u754C\u9762\u7F8E\u5316/\u6C34\u6CE2\u7EB9\u8FDB\u5EA6\u6761/ProgressBar.py=utf-8 encoding//\u754C\u9762\u7F8E\u5316/\u6C34\u6CE2\u7EB9\u8FDB\u5EA6\u6761/TestWidget.py=utf-8 encoding//\u7A0B\u5E8F\u91CD\u542F/AutoRestart.py=utf-8 diff --git a/界面美化/QSlider美化/PaintQSlider.py b/界面美化/QSlider美化/PaintQSlider.py new file mode 100644 index 0000000..b894217 --- /dev/null +++ b/界面美化/QSlider美化/PaintQSlider.py @@ -0,0 +1,113 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +""" +Created on 2018年5月15日 +@author: Irony +@site: https://github.com/892768447 +@email: 892768447@qq.com +@file: PaintQSlider +@description: +""" +from PyQt5.QtCore import Qt, QRect, QPointF +from PyQt5.QtGui import QPainter, QColor +from PyQt5.QtWidgets import QSlider, QWidget, QVBoxLayout, QProxyStyle, QStyle,\ + QStyleOptionSlider + + +__Author__ = """By: Irony +QQ: 892768447 +Email: 892768447@qq.com""" +__Copyright__ = "Copyright (c) 2018 Irony" +__Version__ = "Version 1.0" + + +class SliderStyle(QProxyStyle): + + def subControlRect(self, control, option, subControl, widget=None): + rect = super(SliderStyle, self).subControlRect( + control, option, subControl, widget) + if subControl == QStyle.SC_SliderHandle: + if int(option.state) == 74113: + radius = 30 + x = min(rect.x() - 10, widget.width() - radius) + x = x if x >= 0 else 0 + else: + radius = 10 + x = min(rect.x(), widget.width() - radius) + + rect = QRect(x, + int((rect.height() - radius) / 2), radius, radius) + return rect + return rect + + +class PaintQSlider(QSlider): + + def __init__(self, *args, **kwargs): + super(PaintQSlider, self).__init__(*args, **kwargs) + # 设置代理样式,主要用于计算和解决鼠标点击区域 + self.setStyle(SliderStyle()) + + def paintEvent(self, _): + option = QStyleOptionSlider() + self.initStyleOption(option) + + painter = QPainter(self) + painter.setRenderHint(QPainter.Antialiasing) + + # 画中间白色线条 + painter.setPen(Qt.white) + painter.setBrush(Qt.white) + y = self.height() / 2 + painter.drawLine(QPointF(0, y), QPointF(self.width(), y)) + + # 中间圆圈的位置 + rect = self.style().subControlRect( + QStyle.CC_Slider, option, QStyle.SC_SliderHandle, self) + painter.setPen(Qt.NoPen) + + # 这里是判断鼠标在handle上面,由于未找到变量比较,故使用具体数字(可能会改变) + if int(option.state) == 74113: # 双重圆 + # 半透明大圆 + r = rect.height() / 2 + painter.setBrush(QColor(255, 255, 255, 100)) + painter.drawRoundedRect(rect, r, r) + # 实心小圆(上下左右偏移4) + rect = rect.adjusted(4, 4, -4, -4) + r = rect.height() / 2 + painter.setBrush(QColor(255, 255, 255, 255)) + painter.drawRoundedRect(rect, r, r) + # 绘制文字 + painter.setPen(Qt.white) + painter.drawText( + rect.x(), + rect.y() - rect.height() - 2, + rect.width(), + rect.height(), + Qt.AlignCenter, str(self.value()) + ) + else: # 实心圆 + r = rect.height() / 2 + painter.setBrush(Qt.white) + painter.drawRoundedRect(rect, r, r) + + +class Window(QWidget): + + def __init__(self, *args, **kwargs): + super(Window, self).__init__(*args, **kwargs) + self.setAttribute(Qt.WA_StyledBackground, True) + layout = QVBoxLayout(self) + layout.addWidget(PaintQSlider(Qt.Vertical, self, minimumWidth=90)) + layout.addWidget(PaintQSlider(Qt.Horizontal, self, minimumHeight=90)) + + +if __name__ == '__main__': + import sys + from PyQt5.QtWidgets import QApplication + app = QApplication(sys.argv) + w = Window() + w.setStyleSheet('QWidget {background: gray;}') + w.show() + sys.exit(app.exec_()) diff --git a/界面美化/QSlider美化/QssQSlider.py b/界面美化/QSlider美化/QssQSlider.py new file mode 100644 index 0000000..bfbbc58 --- /dev/null +++ b/界面美化/QSlider美化/QssQSlider.py @@ -0,0 +1,84 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +""" +Created on 2018年5月15日 +@author: Irony +@site: https://github.com/892768447 +@email: 892768447@qq.com +@file: QssQSlider +@description: 通过QSS美化QSlider +""" +from PyQt5.QtCore import Qt +from PyQt5.QtWidgets import QWidget, QVBoxLayout, QSlider + + +__Author__ = """By: Irony +QQ: 892768447 +Email: 892768447@qq.com""" +__Copyright__ = "Copyright (c) 2018 Irony" +__Version__ = "Version 1.0" + +StyleSheet = """ +QWidget { + background: gray; +} + +/*横向*/ +QSlider:horizontal { + min-height: 60px; +} +QSlider::groove:horizontal { + height: 1px; + background: white; +} +QSlider::handle:horizontal { + width: 30px; + margin-top: -15px; + margin-bottom: -15px; + border-radius: 15px; + background: qradialgradient(spread:reflect, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 rgba(210, 210, 210, 255), stop:0.7 rgba(210, 210, 210, 100)); +} +QSlider::handle:horizontal:hover { + background: qradialgradient(spread:reflect, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 rgba(255, 255, 255, 255), stop:0.7 rgba(255, 255, 255, 100)); +} + +/*竖向*/ +QSlider:vertical { + min-width: 60px; +} +QSlider::groove:vertical { + width: 1px; + background: white; +} +QSlider::handle:vertical { + height: 30px; + margin-left: -15px; + margin-right: -15px; + border-radius: 15px; + background: qradialgradient(spread:reflect, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 rgba(210, 210, 210, 255), stop:0.7 rgba(210, 210, 210, 100)); +} +QSlider::handle:vertical:hover { + background: qradialgradient(spread:reflect, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 rgba(255, 255, 255, 255), stop:0.7 rgba(255, 255, 255, 100)); +} +""" + + +class Window(QWidget): + + def __init__(self, *args, **kwargs): + super(Window, self).__init__(*args, **kwargs) + self.setAttribute(Qt.WA_StyledBackground, True) + layout = QVBoxLayout(self) + layout.addWidget(QSlider(Qt.Vertical, self)) + layout.addWidget(QSlider(Qt.Horizontal, self)) + + +if __name__ == '__main__': + import sys + from PyQt5.QtWidgets import QApplication + app = QApplication(sys.argv) + app.setStyleSheet(StyleSheet) + w = Window() + w.show() + sys.exit(app.exec_()) diff --git a/界面美化/QSlider美化/README.md b/界面美化/QSlider美化/README.md new file mode 100644 index 0000000..56211cb --- /dev/null +++ b/界面美化/QSlider美化/README.md @@ -0,0 +1,10 @@ +# QSlider美化 + +### 简单说明 + - 1.通过QSS美化 + - 2.通过paintEvent绘制 + +截图 + +![1](ScreenShot/1.gif) +![1](ScreenShot/2.gif) \ No newline at end of file