PyQt5之CheckBox美化

你逆着人流朝我走来，我迎着阳光对你说“好久不见”。
—— JvJv

许久未见，小伙伴们有没有想我呢？

今天和亲爱的小伙伴们分享一下关于CheckBox的美化，这个控件用到的场景还是挺多的。如果只说名字，你可能没啥印象，那么请看下面这张图：

看起来效果还是ok的，实现原理也非常简单，其实就是设置CheckBox这个控件2种状态下的图标。说的再直白一点，就是“选中”状态下设置绿色开关图标，“未选中”状态下设置灰色开关图标。

下面那个效果同理，“未选中”状态下是红色锁的图标，“选中”状态下是绿色锁的图标。

有2种方法可以设置，1个是直接在Qt Designer中设置，如下图：

代码如下：

#checkBox{
font-size: 15px;
}

#checkBox::indicator {
padding-top: 1px;
width: 100px;
height: 90px;border: none;
}

#checkBox::indicator:unchecked {
image: url(./image/close.svg);
}

#checkBox::indicator:checked {
image: url(./image/open.svg);
}

需要注意的是，图标是要自己去素材网站找的。下载保存好之后把 image url 后面括号中的路径替换一下就可以了，其它参数根据自己的需要去调整。

在代码中的写法如下，我就不截图了，直接放上完整的代码，核心代码在2条虚线之间：

#!/usr/bin/env python
# -*- coding:utf-8 -*-
# @FileName  :main.py
# @Time      :2023/3/8 20:24
# @Author    :JvJv

from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QApplication, QStyleFactory

from untitled import Ui_MainWindow


class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)

        # 设置窗口风格为：Fusion
        QApplication.setStyle(QStyleFactory.create('Fusion'))

        # -------------------------- start ----------------------------------
        self.checkBox.setStyleSheet("#checkBox{\n"
                                    "    font-size: 15px;\n"
                                    "}\n"
                                    "\n"
                                    "#checkBox::indicator {\n"
                                    "    padding-top: 1px;\n"
                                    "    width: 100px;\n"
                                    "    height: 90px;\n"
                                    "    border: none;\n"
                                    "}\n"
                                    "\n"
                                    "#checkBox::indicator:unchecked {\n"
                                    "    image: url(./image/close.svg);\n"
                                    "}\n"
                                    "\n"
                                    "#checkBox::indicator:checked {\n"
                                    "    image: url(./image/open.svg);\n"
                                    "}")

        self.checkBox_2.setStyleSheet("#checkBox_2{\n"
                                      "    font-size: 15px;\n"
                                      "}\n"
                                      "\n"
                                      "#checkBox_2::indicator {\n"
                                      "    padding-top: 1px;\n"
                                      "    width: 100px;\n"
                                      "    height: 90px;\n"
                                      "    border: none;\n"
                                      "}\n"
                                      "\n"
                                      "#checkBox_2::indicator:unchecked {\n"
                                      "    image: url(./image/已锁.svg);\n"
                                      "}\n"
                                      "\n"
                                      "#checkBox_2::indicator:checked {\n"
                                      "    image: url(./image/开锁.svg);\n"
                                      "}")


# -------------------------- end ------------------------------------


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    mainWindow = MainWindow()
    mainWindow.show()
    sys.exit(app.exec_())

美化对于程序中的功能实现来说真的是很简单了，代码行数虽然多，但都很容易理解，大家只要稍许耐心就会用了。后面我会继续更新关于控件美化系列的文章，希望大家能点个关注，不关注点个赞也行