zhiyiYo / PyQt-Fluent-Widgets

A fluent design widgets library based on C++ Qt/PyQt/PySide. Make Qt Great Again.
https://qfluentwidgets.com
GNU General Public License v3.0
5.82k stars 565 forks source link

[Help]请教下如何自定义`SwitchButton`的`Indicator`的样式 #669

Closed keymou closed 11 months ago

keymou commented 11 months ago

switch_button.qss样式表只能设置整个控件的背景色、QLabel的样式,无法设置SwitchButtonIndicator的样式

QWidget {
    background-color: transparent;
}

SwitchButton {
    qproperty-spacing: 12;
    background-color: transparent;
}

SwitchButton>QLabel {
    font: 14px 'Segoe UI', 'Microsoft YaHei', 'PingFang SC';
    color: white;
    background-color: transparent;
    border: none;
}

SwitchButton>QLabel:disabled {
    color: rgba(255, 255, 255, 0.36);
}
zhiyiYo commented 11 months ago

重写 paintEvent,SwitchButton 是画出来的

keymou commented 11 months ago

重写 paintEvent,SwitchButton 是画出来的

好的,谢谢。

另外有个通过setCustomStyleSheetCheckBox组件设置样式的问题,PrimaryPushButton通过setCustomStyleSheet可以正常设置样式,达到预期效果,但相同方法给CheckBox设置选中后样式,却无法生效。 样式表内容:

CheckBox {
    color: black;
    font: 14px 'Segoe UI', 'Microsoft YaHei', 'PingFang SC';
    spacing: 8px;
    min-width: 28px;
    min-height: 22px;
    outline: none;
    margin-left: 1px;
}

CheckBox::indicator {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.48);
    background-color: rgba(0, 0, 0, 0.022);
}

CheckBox::indicator:hover {
    border: 1px solid rgba(0, 0, 0, 0.56);
    background-color: rgba(0, 0, 0, 0.05);
}

CheckBox::indicator:pressed {
    border: 1px solid rgba(0, 0, 0, 0.27);
    background-color: rgba(0, 0, 0, 0.12);
}

CheckBox::indicator:checked,
CheckBox::indicator:indeterminate {
    border: 1px solid #008cff;
    background-color: #008cff;
}

CheckBox::indicator:checked:hover,
CheckBox::indicator:indeterminate:hover {
    border: 1px solid #0094ff;
    background-color: #0094ff;
}

CheckBox::indicator:checked:pressed,
CheckBox::indicator:indeterminate:pressed {
    border: 1px solid #3e9bff;
    background-color: #3e9bff;
}

CheckBox:disabled {
    color: rgba(0, 0, 0, 110);
}

CheckBox::indicator:disabled {
    border: 1px solid rgba(0, 0, 0, 0.27);
    background-color: transparent;
}

CheckBox::indicator:checked:disabled,
CheckBox::indicator:indeterminate:disabled {
    border: 1px solid rgb(199, 199, 199);
    background-color: rgb(199, 199, 199);
}

最小代码:

from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QWidget, QVBoxLayout, QHBoxLayout, QApplication
from qfluentwidgets import (PrimaryPushButton, LineEdit, TitleLabel, PillToolButton, ToggleToolButton, SwitchButton,
                            PrimaryDropDownPushButton, FluentIcon as FIF, TransparentToggleToolButton, CheckBox)
from qfluentwidgets import setCustomStyleSheet

class Win(QWidget):

    def __init__(self):
        super().__init__()
        self.view = QVBoxLayout(self)
        self.titleView = QHBoxLayout()
        self.user = LineEdit(self)
        self.button = PrimaryPushButton('Primary button', self)
        self.check_box = CheckBox(self)
        self.displayLabel = TitleLabel(self)

        # 设置标签
        self.check_box.setText('check box')
        self.setStyleSheet("""QWidget#demo {background-color: #ffffff;}""")

        self.applyStyleSheet()
        self.resize(560, 225)
        self._setQss()
        self._initWidget()

    def applyStyleSheet(self):
        with open('../app/resource/qss/light/button.qss', encoding='utf-8') as f:
            primary_button_style = f.read()
        with open('../app/resource/qss/light/check_box.qss', encoding='utf-8') as f:
            check_box_style = f.read()
        setCustomStyleSheet(self.button, primary_button_style, primary_button_style)
        setCustomStyleSheet(self.check_box, check_box_style, check_box_style)

    def _initWidget(self):
        self.user.setFixedWidth(300)

        self.titleView.addWidget(self.user, 0, Qt.AlignLeft | Qt.AlignVCenter)
        self.titleView.addStretch(2)
        self.titleView.addWidget(self.button)
        self.titleView.addWidget(self.check_box)

        self.view.addLayout(self.titleView)
        self.view.addWidget(self.displayLabel, 0, Qt.AlignCenter | Qt.AlignVCenter)
        self.button.clicked.connect(self.addLabel)  # type: ignore

    def _setQss(self):
        self.setObjectName('demo')
        self.button.setObjectName('button')

    def addLabel(self):
        if text := self.user.text():
            self.displayLabel.setText(text)
            self.user.clear()

if __name__ == '__main__':
    app = QApplication([])
    demo2 = Win()
    demo2.show()
    app.exec_()

效果图: image

zhiyiYo commented 11 months ago

CheckBox 也是画出来的,除非你改成 v1.4.1

keymou commented 11 months ago

CheckBox 也是画出来的,除非你改成 v1.4.1

好的,多谢