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文件即可。
在这里插入图片描述


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

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

庸了个白

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值