xmengnet/PyQt
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

QSlider美化 编写中

Browse source
This commit is contained in:
Irony 2018-05-15 18:00:00 +08:00
parent 1a3752d937
commit 2fbd0f4f20
4 changed files with 209 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.settings/org.eclipse.core.resources.prefs
View file

@ -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

113
界面美化/QSlider美化/PaintQSlider.py Normal file
View file

@ -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_())

84
界面美化/QSlider美化/QssQSlider.py Normal file
View file

@ -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_())

10
界面美化/QSlider美化/README.md Normal file
View file

@ -0,0 +1,10 @@
# QSlider美化
### 简单说明
- 1.通过QSS美化
- 2.通过paintEvent绘制
截图
![1](ScreenShot/1.gif)
![1](ScreenShot/2.gif)