PyQt5界面UI美化专题

PyQt5的界面UI美化包括多种方式，包括QSS样式表、FluenWidget工具等，以下章节中详细的介绍不同控件美化的方法，喜欢的同学请点赞收藏！

一 QSS样式表美化

1.1 Label美化为LED指示灯

直接上代码，不废话

from PyQt5.QtWidgets import QApplication, QLabel, QPushButton, QWidget, QVBoxLayout  
  
app = QApplication([])  
window = QWidget()  
layout = QVBoxLayout(window)  
  
# 创建QLabel和QPushButton  
label = QLabel('')  
button = QPushButton('LED指示灯')  
  
# 将QLabel和QPushButton添加到布局中  
layout.addWidget(label)  
layout.addWidget(button)  
  
# 定义QSS样式表  
qss = """  
QLabel {  
    /* 设置QLabel的宽高 */  
    min-width: 34px;  
    min-height: 34px;  
    max-width:34px;  
    max-height: 34px;  
    /* 设置边框 */  
    border: 5px solid rgb(180,180,180);  
    /* 设置边框圆角 */  
    border-radius: 18px;  
    /* 设置背景色 */  
    background-color: red;  
}  
"""  
  
# 应用QSS样式表到QLabel  
label.setStyleSheet(qss)  
  
# 定义点击按钮时改变QLabel背景色的函数  
def change_background():  
    qss = """  
     QLabel {  
    /* 设置QLabel的宽高 */  
    min-width: 34px;  
    min-height: 34px;  
    max-width:34px;  
    max-height: 34px;  
    /* 设置边框 */  
    border: 5px solid rgb(180,180,180);  
    /* 设置边框圆角 */  
    border-radius: 18px;  
    /* 设置背景色 */  
    background-color: green;  
}  
"""  
    label.setStyleSheet(qss)  
  
# 将函数绑定到按钮的clicked信号  
button.clicked.connect(change_background)  
  
window.show()  
app.exec_()

1.2 按钮美化

直接上代码，详见注释

from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout  
  
app = QApplication([])  
window = QWidget()  
layout = QVBoxLayout(window)  
  
# 创建一个按钮  
button = QPushButton('Click Me')  
layout.addWidget(button)  
  
# 定义QSS样式表  
qss = """  
QPushButton {  
    /* 设置按钮的背景颜色 */  
    background-color: red;  
    /* 设置按钮的文字颜色 */  
    color: white;  
    /* 设置按钮的边框样式（可选） */  
    border-style: outset;  
    border-width: 2px;  
    border-radius: 10px;  
    /* 设置按钮的最小宽度和高度 */  
    min-width: 10em;  
    min-height: 4em;  
    /* 设置内边距 */  
    padding: 10px;  
}  
  
QPushButton:hover {  
    /* 设置鼠标悬停在按钮上时的背景颜色 */  
    background-color: green;  
}  
  
QPushButton:pressed {  
    /* 设置按钮按下时的背景颜色 */  
    background-color: blue;  
}  
  
QPushButton:disabled {  
    /* 设置按钮禁用时的背景颜色和文字颜色 */  
    background-color: gray;  
    color: black;  
}  
"""  
  
# 应用QSS样式表到按钮  
button.setStyleSheet(qss)  
  
window.show()  
app.exec_()

1.3 RadioButton

废话不多说，直接上代码

from PyQt5.QtWidgets import QApplication, QRadioButton, QWidget, QVBoxLayout  
  
app = QApplication([])  
window = QWidget()  
layout = QVBoxLayout(window)  
  
# 创建两个单选按钮  
radio1 = QRadioButton('Option 1')  
radio2 = QRadioButton('Option 2')  
  
# 将单选按钮添加到布局中  
layout.addWidget(radio1)  
layout.addWidget(radio2)  
  
# 定义QSS样式表  
qss = """  
QRadioButton {  
    /* 设置单选按钮的背景颜色 */  
    background-color: #f0f0f0;  
    /* 设置单选按钮的文字颜色 */  
    color: black;  
    /* 设置单选按钮的边框样式 */  
    border-style: solid;  
    border-width: 1px;  
    border-radius: 5px;  
    border-color: #d0d0d0;  
    /* 设置单选按钮的间距 */  
    margin: 5px;  
    /* 设置单选按钮的字体 */  
    font: bold 12px;  
    /* 设置单选按钮的指示器（小圆点）大小 */  
    indicator-size: 15px;  
}  
  
QRadioButton::indicator {  
    /* 设置单选按钮指示器的背景颜色 */  
    background-color: #e0e0e0;  
    /* 设置单选按钮指示器的边框 */  
    border: 2px solid #c0c0c0;  
    /* 设置单选按钮指示器的宽度和高度 */  
    width: 15px;  
    height: 15px;  
    /* 设置单选按钮指示器的圆角 */  
    border-radius: 8px;  
}  
  
QRadioButton::indicator:checked {  
    /* 设置单选按钮选中时指示器的背景颜色 */  
    background-color: #007bff;  
    /* 设置单选按钮选中时指示器的边框颜色 */  
    border-color: #0056b3;  
}  
  
QRadioButton::indicator:hover {  
    /* 设置鼠标悬停在单选按钮指示器上时的背景颜色 */  
    background-color: #ddd;  
}  
  
QRadioButton::indicator:pressed {  
    /* 设置单选按钮指示器按下时的背景颜色 */  
    background-color: #ccc;  
    /* 设置单选按钮指示器按下时的边框颜色 */  
    border-color: #888;  
}  
  
QRadioButton::indicator:disabled {  
    /* 设置单选按钮禁用时指示器的背景颜色 */  
    background-color: #eee;  
    /* 设置单选按钮禁用时指示器的边框颜色 */  
    border-color: #aaa;  
}  
"""  
  
# 应用QSS样式表到单选按钮  
radio1.setStyleSheet(qss)  
radio2.setStyleSheet(qss)  
  
window.show()  
app.exec_()

1.4 CheckBox美化

上代码

import sys  
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QCheckBox  
  
class CheckBoxExample(QWidget):  
    def __init__(self):  
        super().__init__()  
        self.initUI()  
  
    def initUI(self):  
        # 设置窗口的标题和初始大小  
        self.setWindowTitle('QCheckBox StyleSheet Example')  
        self.setGeometry(100, 100, 300, 200)  
  
        # 创建一个 QVBoxLayout 布局  
        layout = QVBoxLayout()  
          
        # 创建 QCheckBox 控件  
        self.checkbox1 = QCheckBox('Checkbox 1')  
        self.checkbox2 = QCheckBox('Checkbox 2')  
        self.checkbox3 = QCheckBox('Checkbox 3')  
  
        # 使用样式表设置控件样式  
        self.checkbox1.setStyleSheet("""  
            QCheckBox {  
                color: blue;  
                background-color: lightgray;  
                spacing: 5px;  
            }  
            QCheckBox::indicator {  
                width: 30px;  
                height: 30px;  
            }  
            QCheckBox::indicator:unchecked {  
                image: url(unchecked.png);  
            }  
            QCheckBox::indicator:checked {  
                image: url(checked.png);  
            }  
        """)  
  
        self.checkbox2.setStyleSheet("""  
            QCheckBox {  
                color: green;  
                background-color: yellow;  
                spacing: 10px;  
            }  
            QCheckBox::indicator {  
                width: 40px;  
                height: 40px;  
            }  
        """)  
  
        self.checkbox3.setStyleSheet("""  
            QCheckBox {  
                color: red;  
                background-color: black;  
            }  
        """)  
  
        # 将控件添加到布局中  
        layout.addWidget(self.checkbox1)  
        layout.addWidget(self.checkbox2)  
        layout.addWidget(self.checkbox3)  
  
        # 设置窗口的布局  
        self.setLayout(layout)  
  
if __name__ == '__main__':  
    app = QApplication(sys.argv)  
    ex = CheckBoxExample()  
    ex.show()  
    sys.exit(app.exec_())