PyQt5 – 复选框的指示器皮肤

下面是Python PyQt5的复选框指示器皮肤的完整使用攻略。

1. 概述

在PyQt5中，复选框是常用的用户界面元素之一，可以通过指定指示器皮肤来更改复选框外观。指示器分为两种类型：交叉（checkmark）和钮（indicator），任何一种类型都可以有不同的皮肤。通过使用Qt中的样式表（QSS），可以更改复选框皮肤。

2. 使用指南

2.1 指定样式表

要更改复选框的皮肤，需要设置样式表（QSS），即通过Css的方式来描述外观属性。这种方式不同于Qt常规的编程方式，因此需要我们自学简单的Css语法。下面是一个示例：

checkbox.setStyleSheet("""
QCheckBox::indicator {
    width: 20px;
    height: 20px;
}

QCheckBox::indicator:checked {
    image: url(./images/checkbox_checked.png);
}

QCheckBox::indicator:unchecked {
    image: url(./images/checkbox_unchecked.png);
}

""")

通过这段代码，我们可以改变QCheckBox的indicator（指示器）的样式，比如样式中定义了:

• 设置了指示器的宽度、高度（前两行）；
• 指定了“被选中”和“未选中”状态下的图片（后两行）。

2.2 示例

下面是另一个代码示例，用于更改复选框的指示器皮肤。此示例演示了如何使用css更改多个复选框的外观，并在窗口上放置一个标签以显示当前选项：

import sys
from PyQt5.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget, QCheckBox


class CheckBoxWidget(QWidget):
    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):
        vbox = QVBoxLayout()

        self.label = QLabel("Nothing is checked")
        vbox.addWidget(self.label)

        cb1 = QCheckBox("Option 1")
        cb1.setStyleSheet("""
            QCheckBox::indicator {
                width: 20px;
                height: 20px;
                border: 2px solid #555;
                border-radius: 4px;
            }

            QCheckBox::indicator:checked {
                background-color: #0072c6;
            }
        """)
        cb1.stateChanged.connect(self.handleCheckbox)
        vbox.addWidget(cb1)

        cb2 = QCheckBox("Option 2")
        cb2.setStyleSheet("""
            QCheckBox::indicator {
                width: 20px;
                height: 20px;
                border: 2px solid #555;
                border-radius: 4px;
            }

            QCheckBox::indicator:checked {
                background-color: #f0ad4e;
            }
        """)
        cb2.stateChanged.connect(self.handleCheckbox)
        vbox.addWidget(cb2)

        cb3 = QCheckBox("Option 3")
        cb3.setStyleSheet("""
            QCheckBox::indicator {
                width: 20px;
                height: 20px;
                border: 2px solid #555;
                border-radius: 4px;
            }

            QCheckBox::indicator:checked {
                background-color: #d9534f;
            }
        """)
        cb3.stateChanged.connect(self.handleCheckbox)
        vbox.addWidget(cb3)

        self.setLayout(vbox)

        self.setGeometry(300, 300, 250, 150)
        self.setWindowTitle("CheckBox Widget")
        self.show()

    def handleCheckbox(self, state):
        selected_options = []
        if state == 0:
            if not self.sender().isChecked():
                pass
            else:
                self.sender().setChecked(False)
        else:
            if self.sender().isChecked():
                selected_options.append(self.sender().text())

        if len(selected_options) == 0:
            self.label.setText("Nothing is checked")
        else:
            self.label.setText(", ".join(selected_options) + " selected.")


if __name__ == "__main__":
    app = QApplication(sys.argv)
    ex = CheckBoxWidget()
    sys.exit(app.exec_())

此示例将复选框的indicator样式更改为按钮类型，同时更改选中和未选中的背景颜色。顶部的标签将显示当前选定的选项。

3. 总结

可以通过设置样式表来更改复选框的skin。我们可以更改样式以创建独特的UI实例。要开始使用代码，请确保了解并掌握css样式表的用法。