PyQt5 给按钮控件添加一个背景图片

写在前面

老规矩，主张PyQt5 写个锤子代码，ui 和逻辑代码不分开的统统是流氓，谢谢，下面开始懒人之旅。

便捷导航
一、QT Designer 添加资源
  1.1 创建qrc载入图片
  1.2 qss引用图片
  1.3 查看当前 qrc 文件
二、正式使用，qrc转py
  2.1 使用pyrcc5 转换
  2.1 在designer生成的 ui文件中引用

一、QT Designer 添加资源

QT Designer 是个啥，还没用过的可以翻我的 《PyQt5 写个锤子代码》， 这里就不多赘述了。

1.1 创建qrc载入图片

1. 通常在右下角存在一个资源浏览器工具（没找到的在左上角 View 打开），点击 Edit Resources，编辑资源文件。
   
   
2. 新建一个资源文件，路径随意，以 .qrc 为文件后缀。
   
3. 新增prefix/path， 添加文件，prefix/path 为前缀，具体体现在引用环节，也可用作分类。添加完毕后在资源浏览器中查看。
   
   出现下图提示为qrc文件与图片不在同一目录，点击copy或把二者放在一块。
   

1.2 qss引用图片

qss即 .qss 文件，其作用与 css 一致，可以使用部分 css2.0 以下语法。一般qss作为一个独立文件存放，这里直接在 Designer 中添加。

1. 点击按钮控件，在属性栏中找到 stylesheet
   
2. Add Resources，添加资源。有三种便捷的添加方式，
   background：平铺，照片多大就显示多大，替换范围含边框；
   border-image：适应按钮大小，替换范围含边框；
   image：与border-image相似，但替换范围不含边框，保持默认样式。
   
   

1.3 查看当前 qrc 文件

<RCC>
  <qresource prefix="test1">
    <file>微信图片_20200731153849.png</file>
  </qresource>
  <qresource prefix="test2"/>
  <qresource prefix="test3"/>
</RCC>

.qrc 文件是一个标记性文本，可以手动编辑，但不推荐。

二、正式使用，qrc转py

一般的qss引用图片会出现无法显示的情况，引用不成功大致是路径无法识别等等乱七八糟的因素，不是欧皇，就用qrc来解决。

2.1 使用pyrcc5 转换

pyrcc5 来自 pip install pyqt5-tools 。

在命令提示符调用，
theqrc.py：即将生成的py文件
theqrc.qrc：上述新建的qrc

$ pyrcc5 -o theqrc.py theqrc.qrc

生成了形如下图的 py 文件，它的实质便是将资源图片转存为字节流，因为代码冗长，截取部分作为参考。

2.1 在designer生成的 ui文件中引用

你仅需要关注的是这两个红框内容。

使用 qt designer 生成的ui代码会在最下方来引入一个默认的写法，将此处改为刚刚生成的py文件即可。

---

写到这里就告一段落了，有问题的在下方评论留言讨论。

那么，恭喜你又学完了一课，我是庸了个白，你的点赞将是我更新的最大动力。