如何自定义 QSlider 中的手柄颜色?
How can I customize the handle color in a QSlider?
我不知道如何使用样式表在 QSlider 中自定义句柄。凹槽样式和手柄样式之间似乎有些干扰,我似乎无法弄清楚如何同时自定义两者。
这是我目前拥有的样式表:
stylesheet = """
QLabel {
font-family: Ubuntu-Regular;
font-size: 12px;
qproperty-alignment: AlignCenter;
color: %s;
background: %s;
border: 1px solid %s;
border-radius: 4px;
min-height: 40px;
max-height: 40px;
min-width: 48px;
max-width: 100px;
}
QSlider:horizontal {
min-width: 240px;
height: 13px;
}
QSlider:vertical {
min-height: 240px;
width: 13px;
}
QSlider::groove {
background: %s;
border-radius: 5px;
}
QSlider::handle {
background: %s;
border-radius: 5px;
}
QSlider::handle:horizontal {
min-width: 25px;
min-height: 13px;
}
QSlider::handle:vertical {
min-width: 13px;
min-height: 25px;
}
""" % (colors.gray_dark, colors.gray_light, colors.gray,
colors.gray_light, colors.primary1)
预期结果:
当前结果:
注意手柄大小只有 1 或 2px。
试一试:
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QHBoxLayout, QLabel, QSlider
from PyQt5.QtCore import Qt
class MyStyle(QWidget):
def __init__(self):
super().__init__()
label = QLabel("123")
layout = QHBoxLayout(self)
layout.addWidget(QSlider(Qt.Horizontal))
layout.addWidget(label)
# style
CSS = """
QLabel {
font-family: Ubuntu-Regular;
font-size: 12px;
qproperty-alignment: AlignCenter;
color: yellow;
background: #565a5e;
border: 1px solid #565a5e;
border-radius: 4px;
min-height: 40px;
max-height: 40px;
min-width: 48px;
max-width: 100px;
}
QSlider::groove:horizontal {
border: 1px solid #565a5e;
height: 10px;
background: #eee;
margin: 0px;
border-radius: 4px;
}
QSlider::handle:horizontal {
background: red;
border: 1px solid #565a5e;
width: 24px;
height: 8px;
border-radius: 4px;
}
"""
if __name__ == "__main__":
app = QApplication(sys.argv)
app.setStyleSheet(CSS)
w = MyStyle()
w.show()
sys.exit(app.exec_())
简明答案:在 QSlider::handle
.
中使用 width
和 height
而不是 min-width
和 min-height
QSlider::handle:horizontal {
width: 25px;
}
QSlider::handle:vertical {
height: 25px;
}
我不知道如何使用样式表在 QSlider 中自定义句柄。凹槽样式和手柄样式之间似乎有些干扰,我似乎无法弄清楚如何同时自定义两者。
这是我目前拥有的样式表:
stylesheet = """
QLabel {
font-family: Ubuntu-Regular;
font-size: 12px;
qproperty-alignment: AlignCenter;
color: %s;
background: %s;
border: 1px solid %s;
border-radius: 4px;
min-height: 40px;
max-height: 40px;
min-width: 48px;
max-width: 100px;
}
QSlider:horizontal {
min-width: 240px;
height: 13px;
}
QSlider:vertical {
min-height: 240px;
width: 13px;
}
QSlider::groove {
background: %s;
border-radius: 5px;
}
QSlider::handle {
background: %s;
border-radius: 5px;
}
QSlider::handle:horizontal {
min-width: 25px;
min-height: 13px;
}
QSlider::handle:vertical {
min-width: 13px;
min-height: 25px;
}
""" % (colors.gray_dark, colors.gray_light, colors.gray,
colors.gray_light, colors.primary1)
预期结果:
当前结果:
注意手柄大小只有 1 或 2px。
试一试:
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QHBoxLayout, QLabel, QSlider
from PyQt5.QtCore import Qt
class MyStyle(QWidget):
def __init__(self):
super().__init__()
label = QLabel("123")
layout = QHBoxLayout(self)
layout.addWidget(QSlider(Qt.Horizontal))
layout.addWidget(label)
# style
CSS = """
QLabel {
font-family: Ubuntu-Regular;
font-size: 12px;
qproperty-alignment: AlignCenter;
color: yellow;
background: #565a5e;
border: 1px solid #565a5e;
border-radius: 4px;
min-height: 40px;
max-height: 40px;
min-width: 48px;
max-width: 100px;
}
QSlider::groove:horizontal {
border: 1px solid #565a5e;
height: 10px;
background: #eee;
margin: 0px;
border-radius: 4px;
}
QSlider::handle:horizontal {
background: red;
border: 1px solid #565a5e;
width: 24px;
height: 8px;
border-radius: 4px;
}
"""
if __name__ == "__main__":
app = QApplication(sys.argv)
app.setStyleSheet(CSS)
w = MyStyle()
w.show()
sys.exit(app.exec_())
简明答案:在 QSlider::handle
.
width
和 height
而不是 min-width
和 min-height
QSlider::handle:horizontal {
width: 25px;
}
QSlider::handle:vertical {
height: 25px;
}