PyQt5Day31--样式设计

一、样式设计概念

　　之前也要使用过，例如：setStyleSheet( )

 二、样式设计的使用

# *******************QSS的使用方法**********************开始
from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)
        # 1、单个控件样式设置
        # box1.setStyleSheet("background-color:orange")
        # box2.setStyleSheet("background-color:cyan")

        label1 = QLabel("标签1",box1)
        label1.setObjectName("l1")
        label1.move(50,50)
        btn1 = QPushButton("按钮1",box1)
        btn1.setObjectName("b1")
        btn1.move(150,50)

        label2 = QLabel("标签2", box2)
        label2.move(50, 50)
        btn2 = QPushButton("按钮2", box2)
        btn2.move(150, 50)

        v_layout = QVBoxLayout()
        self.setLayout(v_layout)
        v_layout.addWidget(box1)
        v_layout.addWidget(box2)

        self.other_btn = QPushButton("按钮3")
        self.other_btn.show()

        # 2、不同区域按钮背景颜色设置（局部）
        # box2.setStyleSheet("QPushButton {background-color:orange;}") # 设置按钮背景颜色
        # self.setStyleSheet("QPushButton {background-color:orange;}") # 设置窗口内的所有按钮背景颜色


if __name__ == '__main__':
    import sys

    app=QApplication(sys.argv)

    window=Window()
    window.show()

    # 3、app内部所有按钮颜色设置（全局）
    # app.setStyleSheet("QPushButton {background-color:orange;}")  # 设置app内的所有按钮背景颜色

    # 4、通过objectName设置某一个控件背景颜色设置(通过#l1找到指定标签)
    # app.setStyleSheet("QLabel#l1 {background-color:green;} QPushButton#b1 {background-color:cyan};")

    # 5、通过文本导入设置
    # with open('test.qss','r') as f:
    #     content = f.read()
    #     app.setStyleSheet(content)

    # 6、通过设置为模块导入实现
    from Tool import QSSTool
    QSSTool.setQssToObj("test.qss",app)

    sys.exit(app.exec_())

# *******************QSS的使用方法**********************结束

QLabel#l1 {
    background-color:orange;
}
QPushButton#b1 {
    background-color:cyan;
    border:6px dotted yellow;
}

class QSSTool:
    @staticmethod
    def setQssToObj(file_path,obj):
        with open(file_path,'r') as f:
            content = f.read()
            obj.setStyleSheet(content)

三、QSS的组成和语法

1、QSS选择器（组合使用，逗号隔开即可）

　　指明哪些控件受到样式的作用，它的分类有8中，下面依次讲解。

（1）通配符选择器

# 匹配所有控件（通配）
* {
    background-color:gray;
}

（2）类型选择器

# 类型选择器(匹配类及子类（向下），不是控件）
QWidget {
    background-color:gray;
}

（3）类选择器

# 类选择器(匹配类不包含子类）
QPushButton {
    background-color:gray;
}

（4）ID选择器

# ID选择器
QPushButton#b1 {
    background-color:cyan;
    border:6px dotted yellow;
}

（5）属性选择器

# 属性选择器（加.表示至是QLabel，不包括子类）
# 根据性质不同加不同颜色的边框 (配合：label1.setProperty("notice_level","warning"))
.QLabel {
    background-color:gray;
}

.QLabel[notice_level='error'] {
    border:3px solid red;
}

.QLabel[notice_level='warning'] {
    border:3px solid yellow;
}

【注意】在实际开发中，不能直接用类，而是选择子类或者指定ID，或者用下面的方法（实际取决于所设置的属性值）

# 根据性质不同加不同颜色的边框 (配合：label1.setProperty("notice_level","warning"))
.QLabel {
    background-color:gray;
}

.QLabel[notice_level] {
    border:3px solid red;
}

（6）后代选择器

对指定ID的控件内（直接包含或间接包含）的指定东西进行设置。

QWidget#box2 QLabel {
    background-color:pink;
}

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)
        box2.setObjectName("box2")

        label1 = QLabel("标签1",box1)
        label1.setObjectName("l1")
        # label1.setProperty("notice_level","warning")
        label1.move(50,50)
        btn1 = QPushButton("按钮1",box1)
        btn1.setObjectName("b1")
        btn1.move(150,50)

        label2 = QLabel("标签2", box2)
        label2.move(50, 50)
        btn2 = QPushButton("按钮2", box2)
        btn2.move(150, 50)

        label3 = QLabel("标签3", box2)
        label3.move(50, 150)

        v_layout = QVBoxLayout()
        self.setLayout(v_layout)
        v_layout.addWidget(box1)
        v_layout.addWidget(box2)


if __name__ == '__main__':
    import sys

    app=QApplication(sys.argv)

    window=Window()
    window.show()

    from Tool import QSSTool
    QSSTool.setQssToObj("test.qss",app)

    sys.exit(app.exec_())

（7）子选择器（直接包含）

QWidget#box2>QLabel {
    background-color:pink;
}

（8）子控件选择器

【案例】修改复选框的形状，根据选中或未选中改变图形。

QCheckBox::indicator {
    40px;
    height:40px;
}

QCheckBox::indicator:checked {
   image:url('xxx.png');
}

QCheckBox::indicator:unchecked {
   image:url('close.png');
}

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)
        box2.setObjectName("box2")

        label1 = QLabel("标签1",box1)
        label1.setObjectName("l1")
        # label1.setProperty("notice_level","warning")
        label1.move(50,50)
        btn1 = QPushButton("按钮1",box1)
        btn1.setObjectName("b1")
        btn1.move(150,100)

        cb = QCheckBox("python", box1)
        cb.move(50,120)
        cb.resize(100,100)

        label2 = QLabel("标签2", box2)
        label2.move(50, 50)
        btn2 = QPushButton("按钮2", box2)
        btn2.move(150, 50)

        label3 = QLabel("标签3", box2)
        label3.move(50, 150)

        v_layout = QVBoxLayout()
        self.setLayout(v_layout)
        v_layout.addWidget(box1)
        v_layout.addWidget(box2)

if __name__ == '__main__':
    import sys

    app=QApplication(sys.argv)

    window=Window()
    window.show()

    from Tool import QSSTool
    QSSTool.setQssToObj("test.qss",app)

    sys.exit(app.exec_())

class QSSTool:
    @staticmethod
    def setQssToObj(file_path,obj):
        with open(file_path,'r') as f:
            content = f.read()
            obj.setStyleSheet(content)

2、QSS伪状态

　　限制控件只能在某种状态下，被样式作用。

QPushButton:pressed {
    boder:2px dotted orange;
}

QPushButton:hover {
    boder:2px solid red;
}

3、QSS声明

　　指明会作用怎样的样式。

（1）语法

{
    key:value;
    key:value;
}

（2）盒子模型

 （3）边框相关

Ⅰ、边框：控件的边框就是围绕控件内容和内边距的一条或多条线，每个边框有3个方面（样式、宽度和颜色）。

　　下面依次展示3个方面的详细内容：

A、样式：

B、宽度：

C、颜色：

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS声明")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label = QLabel("标签测试",self)
        label.resize(300,300)
        label.move(100,100)
        self.qss边框(label)

    def qss边框(self,label):
        label.setStyleSheet('''
            QLabel {
                background-color:cyan;
                border-6px 8px 10px 12px;
                border-top-10px;
                border-style:dotted dashed solid double; 
                border-top-style:groove;
                border-color:red green orange blue;
                border-left-color:cyan;
                border-right-color:rgb(155,200,155);
                border-bottom-color:#00ff00;
            }
        ''')  # 样式、宽度和颜色都可以分开设置:统一设置（上右下左），或者使用指定字段

if __name__ == '__main__':
    import sys

    app=QApplication(sys.argv)

    window=Window()
    window.show()
    sys.exit(app.exec_())

【注】补充：渐变色

# *******************QSS声明-补充渐变色**********************开始
from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS声明")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label = QLabel("标签测试",self)
        label.resize(300,300)
        label.move(100,100)
        self.qss边框(label)

    def qss边框(self,label):
        # 线性渐变
        # label.setStyleSheet('''
        #     QLabel {
        #         background-color:qlineargradient(x1:0,x2:0,x2:1,y2:1,stop:0 red,stop:0.4 orange,stop:1 green);
        #         border-6px 8px 10px 12px;
        #         border-top-10px;
        #         border-style:dotted dashed solid double;
        #         border-top-style:groove;
        #         border-color:red green orange blue;
        #         border-left-color:cyan;
        #         border-right-color:rgb(155,200,155);
        #         border-bottom-color:#00ff00;
        #     }
        # ''')

        # 辐射渐变
        # label.setStyleSheet('''
        #     QLabel {
        #         background-color:qradialgradient(cx:0.7,cy:0.7,radius:0.5,fx:0.5,fy:0.5,stop:0 red,stop:1 orange);
        #         border-6px 8px 10px 12px;
        #         border-top-10px;
        #         border-style:dotted dashed solid double;
        #         border-top-style:groove;
        #         border-color:red green orange blue;
        #         border-left-color:cyan;
        #         border-right-color:rgb(155,200,155);
        #         border-bottom-color:#00ff00;
        #     }
        # ''')

        # 角度渐变
        label.setStyleSheet('''
            QLabel {
                background-color:qconicalgradient(cx:0.5,cy:0.5,angle:10,stop:0 red,stop:1 orange);
                border-6px 8px 10px 12px;
                border-top-10px;
                border-style:dotted dashed solid double; 
                border-top-style:groove;
                border-color:red green orange blue;
                border-left-color:cyan;
                border-right-color:rgb(155,200,155);
                border-bottom-color:#00ff00;
            }
        ''')

if __name__ == '__main__':
    import sys

    app=QApplication(sys.argv)

    window=Window()
    window.show()
    sys.exit(app.exec_())
# *******************QSS声明-补充渐变色**********************结束

Ⅱ、边框圆角

Ⅲ、边框图片

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS声明")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label = QLabel("标签测试",self)
        label.resize(300,300)
        label.move(100,100)
        self.qss边框(label)

    def qss边框(self,label):
        # 边框图片
        label.setStyleSheet('''
            QLabel {
                background-color:qlineargradient(x1:0,x2:0,x2:1,y2:1,stop:0 red,stop:0.4 orange,stop:1 green);
                border-image:url(border_test.png) 128 128 128 128 stretch;
                border-100px;
            }
        ''')


if __name__ == '__main__':
    import sys

    app=QApplication(sys.argv)

    window=Window()
    window.show()
    sys.exit(app.exec_())

（4）外边距（Margin）

label.setStyleSheet('''
    QLabel {
        background-color:qlineargradient(x1:0,x2:0,x2:1,y2:1,stop:0 red,stop:0.4 orange,stop:1 green);
        margin:20px 40px 80px 160px;
        margin-left:40px;

    }
''')

（5）内边距（Padding）

# 内边距
label.setStyleSheet('''
    QLabel {
        background-color:qlineargradient(x1:0,x2:0,x2:1,y2:1,stop:0 red,stop:0.4 orange,stop:1 green);
        color:blue;
        border:10px solid red;
        padding:20px;
        padding-top:100px;
    }
''')

（6）背景（background）

# 背景
label.setStyleSheet('''
    QTextEdit {
        background-color:rgb(100,200,100);
        background-image:url(bg.png);
        background-repeat:no-repeat-xy;
        background-position:right top;
        background-origin:border;
        background-clip:padding;

        background-attachment:fixed;

        border:20px double red;
        color:blue;
    }
''')

（7）字体（Font）+文本（Text）

# 字体+文本
label.setStyleSheet('''
    QTextEdit {
        background-color:qlineargradient(x1:0,x2:0,x2:1,y2:1,stop:0 red,stop:0.4 orange,stop:1 green);
        color:blue;

        font-family:隶书;
        font-size:30px;
        font-style:italic;
        font-weight:bold;
    }
''')

（8）最大最小

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS声明")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label = QLabel("标签测试", self)
        # label.resize(300, 300)
        # label.move(100, 100)

        layout = QVBoxLayout()
        layout.addWidget(label)
        self.setLayout(layout)

        self.qss边框(label)

    def qss边框(self, label):
        # 字体+文本
        label.setStyleSheet('''
            QLabel {
                background-color:qlineargradient(x1:0,x2:0,x2:1,y2:1,stop:0 red,stop:0.4 orange,stop:1 green);
                color:blue;

                min-200px;
                min-height:200px;
                max-600px;
                max-height:600px;
            }
        ''')


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

（9）subcontrol

# *******************QSS-subcontrol**********************开始
from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS声明")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label = QSpinBox(self)
        label.resize(300, 300)
        label.move(100, 100)

        self.qss边框(label)

    def qss边框(self, label):
        label.setStyleSheet('''
            QSpinBox {
                font-size:26px;
                color:orange;
                border:10px double red;
                border-radius:10px;
                background-color:lightgray;
            }
            QSpinBox::up-button,QSpinBox::down-button {
                50px;
                height:50px;
            }
            QSpinBox::up-button {
                subcontrol-origin:padding;
                subcontrol-position:left center;
                image:url(close.png);
            }
            QSpinBox::down-button {
                subcontrol-origin:padding;
                subcontrol-position:right center;
            }
            QSpinBox::up-button:hover {
                bottom:10px;
            }
            QSpinBox::down-button:hover {
                position:relative;
                top:10px;
            }
        ''')

if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())
# *******************QSS-subcontrol**********************结束

QCheckBox {
    color: gray;    
    border: 10px double rgb(76, 76, 76);
    padding: 5px;
}
QCheckBox::indicator {
    subcontrol-origin: border;
    subcontrol-position: left center;
    background: white;
    border: 2px solid gray;
}
QCheckBox::indicator:checked {
    background: rgb(76, 76, 76);
}
''')

四、级联与冲突

 

# *******************QSS级联与冲突**********************开始
from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("级联与冲突")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        btn1 = QPushButton("b1",self)
        btn2 = QPushButton("b2",self)
        btn1.setObjectName('b1')
        btn2.setObjectName('b2')

        btn1.move(100,100)
        btn2.move(200,200)

        self.setStyleSheet('''
            QPushButton:enabled {
                color:gray;
            }
            QPushButton:enabled:hover {
                color:red;
            }
        ''')

if __name__ == '__main__':
    import sys

    app=QApplication(sys.argv)

    window=Window()
    window.show()
    sys.exit(app.exec_())
# *******************QSS级联与冲突**********************结束

五、三方库样式表、常用控件效果

# *******************三方包方式表**********************开始
from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("三方库样式表")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        layout = QVBoxLayout(self)
        label = QLabel("xxx")
        layout.addWidget(label)

        btn =QPushButton("xxx2")
        layout.addWidget(btn)

        cb = QComboBox()
        cb.addItems(['1','2','3'])
        layout.addWidget(cb)

        sb = QSpinBox()
        layout.addWidget(sb)


if __name__ == '__main__':
    import sys
    import qdarkgraystyle

    app=QApplication(sys.argv)
    # 加载第三方样式库
    app.setStyleSheet(qdarkgraystyle.load_stylesheet_pyqt5())

    window=Window()
    window.show()
    sys.exit(app.exec_())
# *******************三方包方式表**********************结束

常用的控件效果如下：

QPushButton{
    color: qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 white, stop: 0.4 red, stop:1 black);
    border:2px solid red;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px
}

QPushButton:hover{
    color: qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 white, stop: 0.4 green, stop:1 black);
    border:5px dotted green;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px
}

QPushButton:pressed{
    font-size: 26px;
    border:10px double orange;
    border-radius: 30px; 
    border-top-right-radius:4px
}

QRadioButton {
        padding-left: 10px;
        spacing: 60px;
        color: red;
        font-size: 20px;
        border: 1px double red;
        border-radius: 40px;
}

QRadioButton::indicator {
         35px;
        height: 30px;
}
    
QRadioButton::indicator::unchecked {
        image: url(close_pic.png);
}

QRadioButton::indicator::checked {
        image: url(open_pic.png);
}

QCheckBox {
    padding-left: 10px;
    spacing: 60px;
    color: red;
    font-size: 20px;
    border: 1px double red;
    border-radius: 40px;
}

QCheckBox::indicator {         
     35px;
    height: 30px;
}

QCheckBox::indicator:unchecked {
    image: url(close_pic.png);
}

QCheckBox::indicator:indeterminate {
    image: url(mid_pic.png);
}

QCheckBox::indicator:checked { 
    image: url(open_pic.png);
}

QLineEdit {
    border: 6px solid rgb(41, 57, 85);   
    border-radius: 10px; 
    background: white;  
    selection-background-color: green; 
    font-size: 14px ;  
}

QLineEdit[echoMode="2"] {
    lineedit-password-character: 65;
}

QLineEdit[readOnly="true"] {
    background-color: gray;
}

QLineEdit:hover {
    border: 1px solid blue;  
}

QTextEdit {
    border-radius: 20px;
    padding-top: 10px;
    padding-left: 30px;
    border-image: url(source/input_back.jpg);  
    selection-background-color: green; 
    font-size: 14px ;  
}

QSpinBox {
    padding-left: 10px;;
    padding-right: 10px;
    border:2px dotted green;
    border-radius: 25px;
}

QSpinBox::up-button {
     50px;
    height: 50px;
    subcontrol-origin: padding;
    subcontrol-position: left center;
    left: 2px;
    border-image: url(up.png);
}

QSpinBox::up-button:hover {
    bottom: 5px;
}

QSpinBox::down-button {
     50px;
    height: 50px;
    subcontrol-origin: margin;
    subcontrol-position: right center;
    right: 2px;
    border-image: url(down.png);
}

QSpinBox::down-button:hover {
    top: 5px;
}

QComboBox {
        color:red;
        selection-background-color: orange;
        min-height: 40px;
        min- 80px;
}

QComboBox QAbstractItemView {
        font: 14px;
        selection-color: white;
        selection-background-color: rgb(80, 80 80);
        background-color: orange;
}

QComboBox QAbstractItemView::item {
        color: green;
}

QComboBox::drop-down {
        background-color: cyan;                   
}

QComboBox::down-arrow {
        image: url(../source/down.png);
         20px;
        height: 20px;
}

QSlider::groove:Horizontal {
    background:lightgray;
    height:16px;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -5px;
    margin-bottom: -5px;
}

QSlider::handle:Horizontal {
    border-image: url(../source/hk.png);
    height: 60px;
    30px;
}

QSlider::add-page:Horizontal{     
    background-color: rgb(87, 97, 106);
    height:4px;
}

QSlider::sub-page:Horizontal {
    background-color:qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 cyan, stop:1 blue);
    height:4px;
}

QProgressBar {
    border: 2px solid gray;
    border-radius: 5px;
    text-align: center;
    color: yellow;
    font-size: 20px;
    background-color: orange;
}

QProgressBar::chunk {
    background-color: green;
     10px;
    margin: 0.5px;
}