PyQt5 ComboBox - 按下时与向下箭头不同的边框大小

在 PyQt5 中，ComboBox 是一个通用工具，旨在使用户能够从下拉列表中选择一个选项。当按下 ComboBox 时，会出现一个下拉列表，其中包含列表中定义的所有选项。默认情况下，ComboBox 的边框大小是固定的，不管是按下时还是展开时，边框大小都是一样的。本文将介绍如何以不同的边框大小来突出 ComboBox 按下时与向下箭头不同的状态。

实现方法

要实现不同的边框大小，我们需要改变 ComboBox 的样式表。样式表是一种语言，用于指定 QWidget 对象在屏幕上的内部和外部面貌。样式表中的属性和值用于操作小部件的几乎所有方面，包括颜色、字体、边框、填充、大小、位置、对齐和背景。要更改 ComboBox 的边框大小，我们需要将样式表中的边框宽度更改为 2px。

self.comboBox.setStyleSheet(
    "QComboBox {"
    "border: 2px solid gray;"
    "border-radius: 8px;"
    "padding: 1px 18px 1px 3px;"
    "min-width: 6em;"
    "}"
    "QComboBox:on {"
    "border-bottom-left-radius: 0px;"
    "border-bottom-right-radius: 0px;"
    "}"
    "QComboBox QAbstractItemView {"
    "border: 2px solid gray;"
    "selection-background-color: lightgray;"
    "}"
    )

这里的核心是第一行，我们在默认样式表中添加了以下代码：

"border: 2px solid gray;"

在这个样式表中，我们添加了一个2像素的边框，颜色为灰色。这使得 ComboBox 在被按下时与向下箭头不同的状态下，边框大小不同。

ComboBox 还有一个问题，展开列表时 ComboBox 右侧的边框会继续向下延伸。这是因为我们添加了固定高度的按钮。要解决此问题，我们需要在 ComboBox 按下时使用另一个样式表（执行以下代码）：

self.comboBox.setStyleSheet(
    "QComboBox {"
    "border: 2px solid gray;"
    "border-top-left-radius: 8px;"
    "border-top-right-radius: 8px;"
    "padding: 1px 18px 1px 3px;"
    "min-width: 6em;"
    "}"
    "QComboBox:on {"
    "border-bottom-left-radius: 0px;"
    "border-bottom-right-radius: 0px;"
    "}"
    "QComboBox QAbstractItemView {"
    "border: 2px solid gray;"
    "selection-background-color: lightgray;"
    "}"
    )

这里我们使用以下代码更改 ComboBox 的边框半径：

"border-top-left-radius: 8px;"
"border-top-right-radius: 8px;"

这些属性将 ComboBox 的左上角和右上角的边角半径更改为8像素。这样，ComboBox 在展开列表的时候就不会继续向下延伸了。

总结

在本文中，我们介绍了如何在 PyQt5 中实现 ComboBox 按下时与向下箭头不同的边框大小。

这里是完整的代码片段，可用于更好的理解：

from PyQt5.QtWidgets import QApplication, QComboBox, QDialog, QVBoxLayout

app = QApplication([])
dialog = QDialog()
layout = QVBoxLayout()
dialog.setLayout(layout)

combo_box = QComboBox()
combo_box.addItems(['Python', 'C++', 'Java', 'JavaScript'])
combo_box.setFixedSize(120, 36)
combo_box.move(20, 20)

combo_box.setStyleSheet(
    "QComboBox {"
    "border: 2px solid gray;"
    "border-radius: 8px;"
    "padding: 1px 18px 1px 3px;"
    "min-width: 6em;"
    "}"
    "QComboBox:on {"
    "border-bottom-left-radius: 0px;"
    "border-bottom-right-radius: 0px;"
    "}"
    "QComboBox QAbstractItemView {"
    "border: 2px solid gray;"
    "selection-background-color: lightgray;"
    "}"
    )

layout.addWidget(combo_box)
dialog.exec_()

希望这篇文章能够帮助您更好地使用 PyQt5 的 ComboBox！