QSS在QDesigner中的应用效果

QSS在QDesigner中的应用效果

先上QSS官方文档：http://doc.qt.io/qt-5/stylesheet-reference.html

QDesigner中简单应用

比如做出如图所示的界面中，Qlabel和Qpushbutton的效果。

首先可以登录官网查询要美化的空间的设置模板，以QLabel为例：

点击box module，里面提供label控件的一些美化操作，例如对边框的颜色填充或者对标签背景的设置等等。这些可以自查。

下面说一说在designer中的设置：

建立一个空白对话框，拖入一个Qlabel框。

以下两种方式都可以设置风格脚本：

1. 对控件单击鼠标右键，选择“改变样式表”：
   照文档设置自己想要的风格，举个例子：
   

2. 在对象属性编辑器中，找到该控件的“stylesheet”，依然可以调用出该控件的样式表，就不演示了。

最后上一个演示模板。

对照查找，上UI导入的代码：

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Login(object):
    def setupUi(self, Login):
        Login.setObjectName("Login")
        Login.resize(922, 801)
        Login.setStyleSheet("QDialog{\n"
"    border:10px solid rgb(200,200,200);\n"
"}")
        self.title = QtWidgets.QLabel(Login)
        self.title.setGeometry(QtCore.QRect(100, 40, 701, 91))
        font = QtGui.QFont()
        font.setFamily("华文行楷")
        font.setPointSize(30)
        self.title.setFont(font)
        self.title.setStyleSheet("QLabel {;\n"
"    color: #BDC8E2;\n"
"    \n"
"\n"
"    border-style: solid;\n"
"    border-width: 2px;\n"
"    border-color: aqua;\n"
"    border-radius: 20px;\n"
"\n"
"    padding-left: 20px;\n"
"    padding-top: 0px;\n"
"\n"
"    background-color: #2E3648;\n"
"    background-repeat: no-repeat;\n"
"}")
        self.title.setAlignment(QtCore.Qt.AlignCenter)
        self.title.setObjectName("title")
        self.sub_title_1 = QtWidgets.QLabel(Login)
        self.sub_title_1.setGeometry(QtCore.QRect(290, 470, 331, 51))
        font = QtGui.QFont()
        font.setFamily("楷体")
        font.setPointSize(14)
        self.sub_title_1.setFont(font)
        self.sub_title_1.setStyleSheet("QLabel{\n"
"    border-top-color:#DDDDDD;\n"
"    border-left-color:#DDDDDD;\n"
"    border-top-color:#FFFFFF;    \n"
"    border-right-color:#FFFFFF;\n"
"    border-buttom-color:#BBBBBB;\n"
"    border-style:solid;\n"
"    border-width:3px;\n"
"    border-radius:20px;\n"
"}")
        self.sub_title_1.setAlignment(QtCore.Qt.AlignCenter)
        self.sub_title_1.setObjectName("sub_title_1")
        self.face_video = QtWidgets.QLabel(Login)
        self.face_video.setGeometry(QtCore.QRect(240, 180, 421, 261))
        self.face_video.setStyleSheet("QLabel{\n"
"    border-top-color:#DDDDDD;\n"
"    border-right-color:#DDDDDD;\n"
"    border-bottom-color:#FFFFFF;    \n"
"    border-left-color:#FFFFFF;\n"
"    border-top-color:#BBBBBB;\n"
"    border-style:solid;\n"
"    border-width:20px;\n"
"    border-radius:20px;\n"
"}")
        self.face_video.setAlignment(QtCore.Qt.AlignCenter)
        self.face_video.setObjectName("face_video")
        self.sub_title_2 = QtWidgets.QLabel(Login)
        self.sub_title_2.setGeometry(QtCore.QRect(380, 550, 191, 20))
        font = QtGui.QFont()
        font.setFamily("华文新魏")
        self.sub_title_2.setFont(font)
        self.sub_title_2.setObjectName("sub_title_2")
        self.label = QtWidgets.QLabel(Login)
        self.label.setGeometry(QtCore.QRect(340, 600, 261, 161))
        self.label.setText("")
        self.label.setPixmap(QtGui.QPixmap(":/lay/mark.png"))
        self.label.setObjectName("label")

        self.retranslateUi(Login)
        QtCore.QMetaObject.connectSlotsByName(Login)

    def retranslateUi(self, Login):
        _translate = QtCore.QCoreApplication.translate
        Login.setWindowTitle(_translate("Login", "Login"))
        self.title.setText(_translate("Login", "手写数字识别系统"))
        self.sub_title_1.setText(_translate("Login", "系统登陆"))
        self.face_video.setText(_translate("Login", "视频显示"))
        self.sub_title_2.setText(_translate("Login", "请将面部置于画面中央！"))