Python3结合PyQt5实现自定义按钮背景

应毕设要求，制作较为漂亮的GUI，本人想先从改变按钮的背景出发。

       在研究如何改变按钮背景的过程中遇到了不少问题。最开始尝试的是用setIcon()这一方法去实现，效果很差，如下：

       代码为：

from PyQt5 import QtWidgetsfrom demoooo import Ui_Dialogfrom PyQt5.QtWidgets import QMainWindowfrom PyQt5.QtGui import QIconclass MyWindow(QMainWindow, Ui_Dialog):    def __init__(self):        super(MyWindow, self).__init__()        self.setupUi(self)        self.pushButton.setIcon(QIcon('22.png'))if __name__ == '__main__':    import sys
    app = QtWidgets.QApplication(sys.argv)
    myshow = MyWindow()
    myshow.show()
    sys.exit(app.exec())

       其中22.png为同一目录下的图片文件。名为demoooo的py文件是由ui文件所转换来的，此ui文件是通过Qt Designer自己绘制得到。ui到py的转换过程网上教程有很多，不在描述。

       发现效果不好，在原基础上添加了下面两个语句：

size = self.pushButton.size()self.pushButton.setIconSize(size)self.pushButton.setIcon(QIcon('22.png'))

       其中size的类型为QSize，目的是想获得按钮大小的尺寸，然后将图片拉伸到该尺寸，效果如下：

      发现并没有达到我想要的要求，反而更加的丑陋了......

      不甘心啊，我在想，是不是考虑的方向错了，我要的是按钮背景，而不是Icon...于是乎，上网查阅了有关设计界面风格的相关内容，查到了一个名叫QSS的东西，进而又发现了一个叫stylesheet的东西，这东西非常好用，能够自己定义控件的颜色背景等等。所以我对之前的代码做了以下的修改，抛弃了之前用的setIcon()：

from PyQt5 import QtWidgetsfrom demoooo import Ui_Dialogfrom PyQt5.QtWidgets import QMainWindowfrom PyQt5.QtGui import QIconclass MyWindow(QMainWindow, Ui_Dialog):    def __init__(self):        super(MyWindow, self).__init__()        self.setupUi(self)        self.pushButton.setStyleSheet('QPushButton{background-image:url(22.png)}')if __name__ == '__main__':    import sys
    app = QtWidgets.QApplication(sys.argv)
    myshow = MyWindow()
    myshow.show()
    sys.exit(app.exec())

       有关setStyleSheet()的用法，我这仅仅用到了按钮控件的background-image这一个属性，他还有很多很多的属性，大家可以自行去网上寻找，有很多相关内容的文章。

       修改完后，效果如下：

       嗯....是全覆盖了，但是！我要的是全图啊！而不是图片的一部分啊！！！所以，我又去网上查Qt如何让background-image中的图像适应于控件的大小。给出的回答是：A background-image does not scale with the size of the widget. 也就是说默认background-image 不会缩放图片以适应控件的大小。但是有一个属性可以！它是border-image，它能让所提供的背景图片自动适应于控件大小。而且当同时定义了background-image和border-image这两个属性，前者会被后者所覆盖。

       所以，我又对代码进行了修改：

       将

self.pushButton.setStyleSheet('QPushButton{background-image:url(22.png)}')

       改成了

self.pushButton.setStyleSheet('QPushButton{border-image:url(22.png)}')

       效果如下：

       Bingo！终于实现了我要的功能，为了更加美观，可以把按钮这两个字给去了。

       今天完成了这一小小功能，mark一下。

原文出处