使用CSS更改QDocketWidget悬停标题栏颜色

时间:2018-12-05 17:36:04

标签: python qt pyqt pyqt5

我有一个带有QDockwidget的GUI,我希望如果用户将鼠标悬停在其上方,则停靠小部件标题栏的颜色将更改颜色。我有一个小的测试程序,下面的标题栏会在光标位于其上方时更改颜色。但是,如果光标在停靠小部件的其余部分上方,它也会更改颜色。有什么办法可以解决这个问题?

CSS = """

    QDockWidget::title {
        background-color: lightblue; 
        border: 1px solid black;
    }

    QDockWidget::title:hover {
        background: yellow;
    }

    QMainWindow::separator {
        background: palette(Midlight);
    }

    QMainWindow::separator:hover {
        background: palette(Mid);
    }
"""

from PyQt5 import QtWidgets
from PyQt5.QtCore import Qt, QSize

class CenteredLabel(QtWidgets.QWidget):

    def __init__(self, text, parent=None):
        super().__init__(parent=parent)
        self.verLayout = QtWidgets.QVBoxLayout()
        self.setLayout(self.verLayout)
        self.horLayout = QtWidgets.QHBoxLayout()
        self.verLayout.addLayout(self.horLayout)
        self.label = QtWidgets.QLabel(text)
        self.horLayout.addWidget(self.label)

    def sizeHint(self):
        return QSize(300, 400)


class MyWindow(QtWidgets.QMainWindow):

    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.setCentralWidget(CenteredLabel("Central Widget"))
        self.dockWidget = QtWidgets.QDockWidget("Dock Title", parent=self)
        self.dockWidget.setWidget(CenteredLabel("Dock Widget"))
        self.addDockWidget(Qt.LeftDockWidgetArea, self.dockWidget)


def main():
    app = QtWidgets.QApplication([])

    # Fusion style is the default style on Linux
    app.setStyle(QtWidgets.QStyleFactory.create("fusion"))
    app.setStyleSheet(CSS)

    win = MyWindow()
    win.show()
    win.raise_()
    app.exec_()

if __name__ == "__main__":
    main()

P.S。我已将应用程序Qt样式设置为fusion,可以完全使用调色板进行配置(与macintosh样式不同)。我更喜欢适用于所有Qt样式的解决方案,但是,如果无法实现,我可以考虑在所有平台上将我的应用样式设置为fusion

1 个答案:

答案 0 :(得分:2)

我尝试了您的代码,并且可以重现相同的问题,对我来说似乎是个错误。

以下是使用自定义窗口小部件作为标题的一种可能的解决方法:

from PyQt5.QtWidgets import QLabel

CSS = """
    #CustomTitle {
        background-color: lightblue; 
        border: 1px solid black;
    }

    #CustomTitle:hover {
        background: red;
    }

    QMainWindow::separator {
        background: palette(Midlight);
    }

    QMainWindow::separator:hover {
        background: palette(Mid);
    }
"""

from PyQt5 import QtWidgets
from PyQt5.QtCore import Qt, QSize

class CenteredLabel(QtWidgets.QWidget):

    def __init__(self, text, parent=None):
        super().__init__(parent=parent)
        self.verLayout = QtWidgets.QVBoxLayout()
        self.setLayout(self.verLayout)
        self.horLayout = QtWidgets.QHBoxLayout()
        self.verLayout.addLayout(self.horLayout)
        self.label = QtWidgets.QLabel(text)
        self.horLayout.addWidget(self.label)

    def sizeHint(self):
        return QSize(300, 400)


class MyWindow(QtWidgets.QMainWindow):

    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.setCentralWidget(CenteredLabel("Central Widget"))
        self.dockWidget = QtWidgets.QDockWidget(parent=self)
        self.dockWidget.setWidget(CenteredLabel("Dock Widget"))
        self.customTitle = QLabel("Dock Title", parent=self.dockWidget)
        self.customTitle.setObjectName("CustomTitle")
        self.dockWidget.setTitleBarWidget(self.customTitle)
        self.addDockWidget(Qt.LeftDockWidgetArea, self.dockWidget)


def main():
    app = QtWidgets.QApplication([])

    # Fusion style is the default style on Linux
    app.setStyle(QtWidgets.QStyleFactory.create("fusion"))
    app.setStyleSheet(CSS)

    win = MyWindow()
    win.show()
    win.raise_()