PYQT5的使用

• 通过写一个登陆界面来学习PYQT5的一些基础功能
• • 代码如下
  • QT designer的使用
  • 用户输入部分
  • 按钮
  • 插入背景

通过写一个登陆界面来学习PYQT5的一些基础功能

代码如下

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file '2.ui'
#
# Created by: PyQt5 UI code generator 5.15.1
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(600, 398)
        Dialog.setStyleSheet("QDialog {\n"
"border-image:url(G:/人工智能实训/GUI//8.jpg);\n"
"}\n"
"QTextBrowser {\n"
"border-image:url();\n"
"}\n"
"QLineEdit {\n"
"border-image:url();\n"
"}\n"
"QComboBox {\n"
"border-image:url();\n"
"}\n"
"QLabel {\n"
"border-image:url();\n"
"}\n"
"QPushButton {\n"
"border-image:url();\n"
"}\n"
"QLineEdit {\n"
"    background: #f3f3f3;\n"
"    background-image: url(G:/人工智能实训/GUI//9.png); \n"
"    background-repeat: no-repeat;\n"
"    background-position: left;\n"
"background-color: rgba(255, 255, 255, 50%);\n"
"    color: #252424;\n"
"    font-family: SegoeUI;\n"
"    font-size: 20px;\n"
"    padding: 2 2 2 30; /* left padding (last number) must be more than the icon\'s width */\n"
"    border: 1px solid #dddddd;\n"
"border-radius:10px;\n"
"}\n"
"\n"
"QLabel {\n"
"    font-family: \"Microsoft YaHei\";\n"
"    font-size: 20px;\n"
"    color: #BDC8E2;\n"
"    \n"
"}\n"
"\n"
"QPushButton {\n"
"    border: 1px solid #333333;\n"
"    padding: 4px;\n"
"    min-width: 65px;\n"
"    min-height: 12px;\n"
"   border-radius:10px;\n"
" font-size: 20px;\n"
"    font-family: \"Microsoft YaHei\";\n"
"    font-color:#BDC8E2;\n"
"font-weight:bold;\n"
"}\n"
"\n"
"QPushButton:hover {\n"
"    background-color: #333333;\n"
"    border-color: #444444;\n"
"}\n"
"\n"
"\n"
"\n"
"QPushButton:disabled {\n"
"    color: #333333;\n"
"}")
        self.pushButton = QtWidgets.QPushButton(Dialog)
        self.pushButton.setGeometry(QtCore.QRect(170, 240, 211, 31))
        self.pushButton.setObjectName("pushButton")
        self.lineEdit = QtWidgets.QLineEdit(Dialog)
        self.lineEdit.setGeometry(QtCore.QRect(170, 130, 211, 31))
        self.lineEdit.setObjectName("lineEdit")
        self.lineEdit_2 = QtWidgets.QLineEdit(Dialog)
        self.lineEdit_2.setGeometry(QtCore.QRect(170, 180, 211, 31))
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.label = QtWidgets.QLabel(Dialog)
        self.label.setGeometry(QtCore.QRect(220, 70, 131, 31))
        self.label.setObjectName("label")
        self.prompt = QtWidgets.QLabel(Dialog)
        self.prompt.setGeometry(QtCore.QRect(590, 540, 231, 30))

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

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.pushButton.setText(_translate("Dialog", "登录"))
        self.lineEdit.setText(_translate("Dialog", "username"))
        self.lineEdit_2.setText(_translate("Dialog", "password"))
        self.label.setText(_translate("Dialog", "Welcome"))

QT designer的使用

Label组件给界面加入文字

样式

QLabel {
    font-family: \"Microsoft YaHei\
    font-size: 20px
    color: #BDC8E2
    
}

用户输入部分

样式

QLineEdit {
    background: #f3f3f3;\n"
    background-image: url(G:/人工智能实训/GUI//9.png); #插入图片的路径
    background-repeat: no-repeat;\n"
    background-position: left;\n"
background-color: rgba(255, 255, 255, 50%) #让输入框半透明
    color: #252424;\n"
   font-family: SegoeUI;\n"
    font-size: 20px;\n"
    padding: 2 2 2 30; /* left padding (last number) must be more than the icon\'s width */\n"
    border: 1px solid #dddddd;\n"
    border-radius:10px
}

按钮

"QPushButton {\n"
"    border: 1px solid #333333;\n"
"    padding: 4px;\n"
"    min-width: 65px;\n"
"    min-height: 12px;\n"
"   border-radius:10px;\n" #让边框为圆弧形
" font-size: 20px;\n"
"    font-family: \"Microsoft YaHei\";\n"
"    font-color:#BDC8E2;\n"
"font-weight:bold;\n"
"}\n"

插入背景

"QDialog {\n"
"border-image:url(G:/人工智能实训/GUI//8.jpg);\n"
"}\n"

将QSS代码插入其中就可更改样式