博客

PyQt5 – 当关闭状态的组合框被按下时添加边框

  • Post category:Python

在使用 PyQt5 开发桌面应用程序时，常常需要使用到组合框（QComboBox）控件。有时候，我们需要在 combobox 处于关闭状态，又被用户点击后，给它添加边框效果。这时候可以通过样式表（Stylesheet）实现。

以下是 PyQT5 – 当关闭状态的组合框被按下时添加边框的完整使用攻略：

步骤1 – 导入必要模块

from PyQt5.QtWidgets import QApplication, QWidget, QComboBox
from PyQt5.QtGui import QPainter, QColor, QBrush
from PyQt5.QtCore import Qt

我们需要用到 QApplication、QWidget、QComboBox 等 Qt 控件类，以及 QPainter 绘制控件，QColor 和 QBrush 定义颜色。

步骤2 – 创建应用程序和窗口

app = QApplication([])
window = QWidget()

创建 QApplication 和 QWidget 对象，后续所有控件都将添加到 QWidget 实例中。

步骤3 – 创建组合框和设置样式表

combobox = QComboBox(window)
combobox.setGeometry(10, 10, 120, 30)

style = """
QComboBox:!editable::down-arrow {
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;
}

QComboBox:!editable::drop-down{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
}
"""
combobox.setStyleSheet(style)

上述代码中，我们在样式表 style 中定义了三个部分：

  • QComboBox:!editable::down-arrow：针对 combobox 处于非编辑状态时，点击下箭头的样式设置，设置下箭头的边框。
  • QComboBox:!editable::drop-down：针对 combobox 处于非编辑状态时，该控件的下拉箭头部分的样式设置，设置下箭头的边框。
  • QComboBox::drop-down：针对 combobox 的下拉箭头部分进行样式设置，设置箭头在 padding 区域内左对齐并与右侧对齐。width 属性设置箭头的宽度为 20px。

步骤4 – 绘制边框

def paintEvent(self, event):
    painter = QPainter(self)
    painter.setPen(QColor('#299AF7'))
    painter.setBrush(QColor('#299AF7'))
    painter.drawRect(0, 0, self.width() - 1, self.height() - 1)

combobox.paintEvent = paintEvent

我们定义了 paintEvent 方法，使用 QPainter 绘制一个颜色为 #299AF7 的矩形框作为 combobox 的边框。最后将自定义的 paintEvent 方法赋值给 combobox 的 paintEvent 方法。

步骤5 – 设置窗口大小和显示窗口

window.resize(200, 200)
window.show()
app.exec_()

最后设置窗口大小和显示，执行应用程序。

示例

以下是两个示例。第一个示例演示 combobox 按钮被点击后的边框效果：

from PyQt5.QtWidgets import QApplication, QWidget, QComboBox
from PyQt5.QtGui import QPainter, QColor, QBrush
from PyQt5.QtCore import Qt

app = QApplication([])
window = QWidget()

combobox = QComboBox(window)
combobox.setGeometry(10, 10, 120, 30)

style = """
QComboBox:!editable::down-arrow {
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;
}

QComboBox:!editable::drop-down{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
}
"""
combobox.setStyleSheet(style)

def paintEvent(self, event):
    painter = QPainter(self)
    painter.setPen(QColor('#299AF7'))
    painter.setBrush(QColor('#299AF7'))
    painter.drawRect(0, 0, self.width() - 1, self.height() - 1)

combobox.paintEvent = paintEvent

window.resize(200, 200)
window.show()
app.exec_()

第二个示例演示 combobox 带有 text，但没有选择任何一项时，边框效果：

from PyQt5.QtWidgets import QApplication, QWidget, QComboBox
from PyQt5.QtGui import QPainter, QColor, QBrush
from PyQt5.QtCore import Qt

app = QApplication([])
window = QWidget()

combobox = QComboBox(window)
combobox.setGeometry(10, 10, 120, 30)
combobox.addItem("please select")
combobox.addItem("item1")
combobox.addItem("item2")

style = """
QComboBox:!editable::down-arrow {
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;
}

QComboBox:!editable::drop-down{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
}
"""
combobox.setStyleSheet(style)

def paintEvent(self, event):
    painter = QPainter(self)
    painter.setPen(QColor('#299AF7'))
    painter.setBrush(QColor('#299AF7'))
    painter.drawRect(0, 0, self.width() - 1, self.height() - 1)

combobox.paintEvent = paintEvent

window.resize(200, 200)
window.show()
app.exec_()

以上就是 PyQT5 – 当关闭状态的组合框被按下时添加边框的完整使用攻略，通过样式表和paintEvent方法实现。

Tags: