PyQt5 QSpinBox – 设置过度线

  • Post category:Python

PyQt5是一种Python语言的GUI框架,其中的QSpinBox控件可以用于输入数字。设置过度线可以使QSpinBox的值在超出范围时呈现红色,方便用户发现错误。下面是关于如何使用PyQt5 QSpinBox-设置过度线的完整使用攻略:

步骤1:导入必要库

首先需要导入PyQt5库,以及QtWidgets模块中的QSpinBox类。示例代码如下:

from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QSpinBox

步骤2:创建QSpinBox对象并设置过度线

接下来创建QSpinBox对象,使用setRange()方法指定范围,setStyleSheet()方法设置过度线。具体代码如下:

spinbox = QSpinBox()
spinbox.setRange(0, 100)
spinbox.setStyleSheet('''
                    QSpinBox::up-button { subcontrol-position: right; } 
                    QSpinBox::down-button { subcontrol-position: left; }
                    QSpinBox::up-arrow, QSpinBox::down-arrow {image: none;}
                    QSpinBox::up-arrow {width:0px;height:0px;}
                    QSpinBox::down-arrow {width:0px;height:0px;}
                    QSpinBox::up-button, QSpinBox::down-button {
                    background-color: #F0F0F0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:hover, QSpinBox::down-button:hover {
                    background-color: #D0D0D0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:pressed, QSpinBox::down-button:pressed {
                    background-color: #B0B0B0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:hover:pressed, QSpinBox::down-button:hover:pressed {
                    background-color: #898989;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-arrow {border-color: #7777EE;}
                    QSpinBox::down-arrow {border-color: #7777EE;''')

其中,setRange()方法接收两个参数,即QSpinBox能够展示的最小值和最大值,本例中为0-100。setStyleSheet()方法设置QSpinBox的样式表,通过子控制选择器subcontrol-position指定QSpinBox中的上下箭头的位置,使用background-color设置按钮的背景颜色,使用border-style和border-width属性设置按钮边框的样式和宽度,使用border-color设置边框的颜色,使用border-radius设置按钮边框的圆角半径。另外设置箭头的宽高均为0,可使箭头不出现,使用border-color设置箭头的边框颜色。

示例1:设置QSpinBox过度线为红色

可以将QSpinBox的值范围限定为1-10,如果输入不合法的值,QSpinBox就会显示过度线并将文字颜色设定为红色。示例代码如下:

spinbox = QSpinBox()
spinbox.setRange(1, 10)
spinbox.setStyleSheet('''
                    QSpinBox::up-button { subcontrol-position: right; } 
                    QSpinBox::down-button { subcontrol-position: left; }
                    QSpinBox::up-arrow, QSpinBox::down-arrow {image: none;}
                    QSpinBox::up-arrow {width:0px;height:0px;}
                    QSpinBox::down-arrow {width:0px;height:0px;}
                    QSpinBox::up-button, QSpinBox::down-button {
                    background-color: #F0F0F0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:hover, QSpinBox::down-button:hover {
                    background-color: #D0D0D0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:pressed, QSpinBox::down-button:pressed {
                    background-color: #B0B0B0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:hover:pressed, QSpinBox::down-button:hover:pressed {
                    background-color: #898989;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-arrow {border-color: #7777EE;}
                    QSpinBox::down-arrow {border-color: #7777EE;
                    }
                    QSpinBox::up-disabled, QSpinBox::down-disabled {
                    background-color: #F0F0F0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled:hover, QSpinBox::down-disabled:hover {
                    background-color: #D0D0D0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled:pressed, QSpinBox::down-disabled:pressed {
                    background-color: #B0B0B0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled:hover:pressed, QSpinBox::down-disabled:hover:pressed {
                    background-color: #898989;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled {
                    border-color: #A8A8A8;color:#AAAAAA}
                    QSpinBox::down-disabled {
                    border-color: #A8A8A8;color:#AAAAAA}
                    QSpinBox::up {border-left: none; border-top:none; border-bottom:none;}
                    QSpinBox::down {border-left: none;border-right:none; border-top:none;}
                    QSpinBox::up:focus , QSpinBox::down:focus{
                    border-color: #B8D5FC;}
                    QSpinBox::up:pressed, QSpinBox::down:pressed {
                    background-color: #DADADA;border-style: solid;border-width:1px;}
                    QSpinBox:focus {
                    border-color: #B8D5FC;}
                    QSpinBox::up:!enabled, QSpinBox::down:!enabled {
                    border-color: #A8A8A8;}
                    QSpinBox::lineEdit{
                    selection-background-color: #00BFFF;
                    selection-color:white;}
                    QSpinBox::invalid{
                    color:red;}
                    QSpinBox::valid{
                    color:black;}
                    ''')
spinbox.setValue(11)   # 超出范围的值

在上面的代码中,使用setValue方法将QSpinBox的值设为超出范围值11,便会触发设置的过度线,QSpinBox上将展示出红色的过度线和红色的文字。

示例2:修改QSpinBox的过度线样式

可以将QSpinBox的过度线颜色设为绿色和宽度加倍,使其更加醒目。示例代码如下:

spinbox = QSpinBox()
spinbox.setRange(0, 200)
spinbox.setStyleSheet('''
                    QSpinBox::up-button { subcontrol-position: right; } 
                    QSpinBox::down-button { subcontrol-position: left; }
                    QSpinBox::up-arrow, QSpinBox::down-arrow {image: none;}
                    QSpinBox::up-arrow {width:0px;height:0px;}
                    QSpinBox::down-arrow {width:0px;height:0px;}
                    QSpinBox::up-button, QSpinBox::down-button {
                    background-color: #F0F0F0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:hover, QSpinBox::down-button:hover {
                    background-color: #D0D0D0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:pressed, QSpinBox::down-button:pressed {
                    background-color: #B0B0B0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-button:hover:pressed, QSpinBox::down-button:hover:pressed {
                    background-color: #898989;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-arrow {border-color: #7777EE;}
                    QSpinBox::down-arrow {border-color: #7777EE;}
                    QSpinBox::up-disabled, QSpinBox::down-disabled {
                    background-color: #F0F0F0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled:hover, QSpinBox::down-disabled:hover {
                    background-color: #D0D0D0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled:pressed, QSpinBox::down-disabled:pressed {
                    background-color: #B0B0B0;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled:hover:pressed, QSpinBox::down-disabled:hover:pressed {
                    background-color: #898989;border-style: solid;border-width: 1px;
                    border-color: #A8A8A8;border-radius: 2px;min-width:2px;min-height:2px;}
                    QSpinBox::up-disabled {
                    border-color: #A8A8A8;color:#AAAAAA}
                    QSpinBox::down-disabled {
                    border-color: #A8A8A8;color:#AAAAAA}
                    QSpinBox::up {border-left: none; border-top:none; border-bottom:none;}
                    QSpinBox::down {border-left: none;border-right:none; border-top:none;}
                    QSpinBox::up:focus , QSpinBox::down:focus{
                    border-color: #B8D5FC;}
                    QSpinBox::up:pressed, QSpinBox::down:pressed {
                    background-color: #DADADA;border-style: solid;border-width:1px;}
                    QSpinBox:focus {
                    border-color: #B8D5FC;}
                    QSpinBox::up:!enabled, QSpinBox::down:!enabled {
                    border-color: #A8A8A8;}
                    QSpinBox::lineEdit{
                    selection-background-color: #00BFFF;
                    selection-color:white;}
                    QSpinBox::invalid{
                    color:green;border-color: green;width:2px;}
                    QSpinBox::valid{
                    color:black;}
                    ''')

在上面的代码中,将QSpinBox的setValue方法注释掉,然后在setStyleSheet方法中设置QSpinBox::invalid伪状态,将文字颜色设为绿色并将边框宽度加倍。使用QSpinBox时,当值超出范围时,QSpinBox会呈现绿色的过度线和绿色的文字。