如何使用Qt Designer设置按钮的图形？

Question

我使用Qt Designer创建了带有边框图像的按钮。 pushButton的样式表如下所示。

border-image: transparent;
border-image: url(:/button_img/main_button.png);

该按钮如下所示：

该按钮可以正常工作，但是我不知道如何为该按钮设置边框插入或插入。我的术语可能是错误的，因为我是GUI开发的新手。我正在寻找的是创建普通按钮时的外观，当您单击该按钮时可以直观地看到。但就我而言，该按钮有效，但是单击该按钮后我看不到图形。

如何添加边框插图或插图？如有其他信息，请告诉我。

Answer 1

不，您不能；不是那样的。

顾名思义，border-image CSS属性用于绘制边框。虽然您看到的似乎是“背景图像”，但实际上是一个边框对象，将您的图像分割为一个3x3的网格矩形，覆盖了整个按钮区域；然后将每个部分“拉伸”以填充其自己的矩形。

+-----------+---------+------------+
| top left  |   top   | top right  |
+-----------+---------+------------+
|   left    |  center |   right    |
+-----------+---------+------------+
|bottom left|  bottom |bottom right|
+-----------+---------+------------+

要了解所有这些工作原理，请阅读stylesheet examples documentation的“常见错误”部分。这是实际发生的情况（为方便起见，我使用半角/半高边距，因此仅显示了4个“角”矩形，因此left，top，{ {1}}，right和bottom矩形为空）：

如果要使用交互显示边框的样式表，则标准方法是为按钮状态设置2张不同的图像，并且它们都需要边框。如果还想实现“悬停”效果，则需要第三张完全没有边框的图像。

此方法的缺点是，如果调整图标的大小，则边框也会被调整大小。

我唯一想到的替代方法是继承您自己的QPushButton小部件并重写其paintEvent方法。您也可以使用event filter，但这不会给您带来任何重大好处，因为无论如何它都会使用非常相似的方法，并且如果对象树甚至稍微复杂的话也会使事情复杂化。

在下面的示例中，我使用仅基于样式表的实现：Qt可以使用center样式表参数来设置类的 existing 属性（已经存在的Qt属性）类，或在类构造函数中添加的类：在qproperty-*方法中不存在的属性上使用setProperty将会不。 尽管通常不需要这种实现（您可以手动设置类实例的pixmap属性），但优点是，使用这种方法只能设置样式表中的所有内容。

__init__

这是一个测试窗口，该窗口将在顶部显示class PixmapButton(QtWidgets.QPushButton): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self._pixmap = QtGui.QPixmap() self.setCheckable(True) self.setSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding) @QtCore.pyqtProperty(QtGui.QPixmap) def pixmap(self): return self._pixmap @pixmap.setter def pixmap(self, pixmapPath): self._pixmap = QtGui.QPixmap(pixmapPath) def paintEvent(self, event): opt = QtWidgets.QStyleOptionButton() self.initStyleOption(opt) qp = QtGui.QPainter(self) # draw the basic button self.style().drawControl(QtWidgets.QStyle.CE_PushButton, opt, qp, self) if self._pixmap.isNull(): return # get the minimum possible size for the pixmap icon minSize = min(self.width(), self.height()) # remove the margin/padding usually necessary for the button contents minSize -= self.style().pixelMetric(QtWidgets.QStyle.PM_ButtonMargin, opt, self) * 2 # create a rectangle based on the minimal size and move it to the center # of the button rect = QtCore.QRect(0, 0, minSize, minSize) rect.moveCenter(self.rect().center()) # finally, draw the "icon" qp.drawPixmap(rect, self._pixmap.scaled(rect.size(), QtCore.Qt.KeepAspectRatio, QtCore.Qt.SmoothTransformation)) 实现（及其边界分割），并在底部显示子类绘制。

border-image

注意：这是一个非常简化的实现。它不会不检查用户是否为按钮设置了自定义图标，并且根本不应该包含按钮文本。