圆形图像作为按钮 PyQt5

Posted 2023-03-30

【中文标题】圆形图像作为按钮 PyQt5

【英文标题】：Circular image as button PyQt5

【发布时间】：2020-10-05 11:13:06

【问题描述】：

我正在尝试创建一个带有图像的圆形按钮。 到目前为止，我已经能够创建一个圆形按钮和一个带有图像背景的按钮，但我无法将两者结合起来。

这是我当前的代码：

import sys
import PyQt5.QtWidgets


class Window(PyQt5.QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()

        # setting title
        self.setWindowTitle("Python ")

        # setting geometry
        self.setGeometry(100, 100, 600, 400)

        # calling method
        self.UiComponents()

        # showing all the widgets
        self.show()

    # method for widgets
    def UiComponents(self):
        button = PyQt5.QtWidgets.QPushButton("CLICK", self)
        button.setGeometry(200, 150, 100, 100)

        # Background img and circular
        button.setStyleSheet('''border-radius : 5;
        border : 2px solid black
        background-image : url(image.png);
        ''')

        # adding action to a button
        button.clicked.connect(self.clickme)

    # action method
    def clickme(self):
        print("pressed")



App = PyQt5.QtWidgets.QApplication(sys.argv)
window = Window()
sys.exit(App.exec())

【问题讨论】：

请注意，上面的代码不起作用，因为您在样式表的第二行末尾缺少;。

【参考方案1】：

Qt 文档中有一个部分正好是about this topic：

在设置 QPushButton 的样式时，通常希望使用图像作为按钮图形。尝试使用 background-image 属性很常见，但这有很多缺点：例如，背景通常会隐藏在按钮装饰后面，因为它不被视为背景。此外，如果调整按钮的大小，整个背景会被拉伸或平铺，这并不总是很好看。

最好使用border-image属性，因为它总是显示图像，而不管背景如何（如果它有alpha值，你可以将它与背景结合起来），并且它有特殊的设置来处理按钮大小调整。

因此，您必须确保您使用的是方形（不是矩形）图像，其边缘有圆形边距，并使用border-image 而不是background-image（如果图像小于按钮，则会平铺图像尺寸）;请注意，您应该不要在样式表中设置任何边框。

    button.setStyleSheet('''
        border-image: url(image.png);
        ''')

您显然需要始终为按钮的高度和宽度使用相同的值，可能使用setFixedSize()，否则如果您将按钮添加到布局中，它将不再是圆形的。