PySide2中QPushButton选中状态背景色异常问题

问题描述 #

我尝试通过样式表设置QPushButton的点击和选中状态背景色，点击按钮时颜色显示正常，但按钮处于选中状态时，会出现带光栅图案的异常颜色，而非设置的纯色。使用的代码如下：

import sys
from PySide2.QtWidgets import (
    QMainWindow, QApplication, QPushButton,
)
from PySide2.QtCore import (
    QSize,
)


class Window(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setMinimumSize(QSize(180, 110))
        self.setWindowTitle('QPushButton Example')

        button0 = QPushButton('Button 0', self)
        button0.setCheckable(True)
        button0.setStyleSheet(
            """QPushButton { background-color: lightgrey; }"""
            """QPushButton::checked { background-color: blue; }"""
            """QPushButton::pressed { background-color: blue; }"""
        )
        button0.resize(100, 32)
        button0.move(50, 10)

        button1 = QPushButton('Button 1', self)
        button1.setCheckable(True)
        button1.setStyleSheet(
            """QPushButton { background-color: lightgrey; }"""
            """QPushButton::checked { background-color: red; }"""
            """QPushButton::pressed { background-color: red; }"""
        )
        button1.resize(100, 32)
        button1.move(50, 60)


def main():
    app = QApplication(sys.argv)
    window = Window()
    window.show()
    app.exec_()


if __name__ == "__main__":
    main()

解决方案 #

问题根源是：当QPushButton设置为checkable=True时，Qt默认会添加一个复选指示器（光栅图案），该元素会叠加在按钮背景之上，导致设置的背景色被遮挡显示异常。

只需在样式表中添加对QPushButton::indicator的样式设置，将其宽高设为0以隐藏默认指示器，就能让选中状态的背景色正常显示纯色。

修改后的完整代码如下：

import sys
from PySide2.QtWidgets import (
    QMainWindow, QApplication, QPushButton,
)
from PySide2.QtCore import (
    QSize,
)


class Window(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setMinimumSize(QSize(180, 110))
        self.setWindowTitle('QPushButton Example')

        button0 = QPushButton('Button 0', self)
        button0.setCheckable(True)
        button0.setStyleSheet(
            """QPushButton { background-color: lightgrey; }"""
            """QPushButton::checked { background-color: blue; }"""
            """QPushButton::pressed { background-color: blue; }"""
            """QPushButton::indicator { width: 0px; height: 0px; }"""
        )
        button0.resize(100, 32)
        button0.move(50, 10)

        button1 = QPushButton('Button 1', self)
        button1.setCheckable(True)
        button1.setStyleSheet(
            """QPushButton { background-color: lightgrey; }"""
            """QPushButton::checked { background-color: red; }"""
            """QPushButton::pressed { background-color: red; }"""
            """QPushButton::indicator { width: 0px; height: 0px; }"""
        )
        button1.resize(100, 32)
        button1.move(50, 60)


def main():
    app = QApplication(sys.argv)
    window = Window()
    window.show()
    app.exec_()


if __name__ == "__main__":
    main()

补充说明 #

除了设置宽高为0，也可以通过QPushButton::indicator { display: none; }来隐藏指示器，效果一致。

内容的提问来源于stack exchange，提问作者NZD