Qt第五十章：手写窗口（二、登录窗口）

女爷i 2024-03-30 12:39 77阅读 0赞

**目录**

一、UI类

二、逻辑类

三、QSS

四、预览

--------------------

#### 一、UI类 ####

from PySide6.QtGui import QPixmap, Qt, QIcon, QCursor
    from PySide6.QtWidgets import QFormLayout, QVBoxLayout, QHBoxLayout, QLabel, QLineEdit, QPushButton, QSpacerItem, \
        QWidget, QApplication, QSizePolicy
    import components.message.resource_rc
    from components.message.message_dialog import MessageDialog
    
    
    class UiFormAddConnection(object):
        def setup_ui(self, parent: QWidget):
            # 加载QSS文件
            with open("./windows.qss", "r", encoding="UTF-8") as f:
                parent.setStyleSheet(f.read())
            # 设置窗口初始大小
            parent.resize(500, 300)
            # 设置窗口标题
            parent.setWindowTitle("登录")
            # 设置窗口图标
            parent.setWindowIcon(QPixmap(":/message/icons/登录页面.png"))
            # 设置水平布局
            root_layout = QVBoxLayout()
            parent.setLayout(root_layout)
            # 去掉边距
            root_layout.setContentsMargins(0, 0, 0, 0)
            # 创建背景板
            self.bg_widget = QWidget(parent)
            self.bg_widget.setObjectName('bg_widget')
            root_layout.addWidget(self.bg_widget)
            # UI设计...
            """
            布局
            """
            # 整体垂直布局
            self.bg_layout = QVBoxLayout()
            self.bg_widget.setLayout(self.bg_layout)
    
            # 内容表单布局
            self.form_layout = QFormLayout()
            # 控件居中
            self.form_layout.setFormAlignment(Qt.AlignmentFlag.AlignCenter)
            self.bg_layout.addLayout(self.form_layout)
    
            # 底部按钮水平布局
            self.button_layout = QHBoxLayout()
            self.bg_layout.addLayout(self.button_layout)
            """
            控件
            """
            self.link_username = QLineEdit()
            self.link_username.setObjectName('link_username')
            self.link_username.setPlaceholderText("账号")
            # 固定大小
            self.link_username.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)
            self.link_username.setMaximumSize(200, 30)
            self.link_username.setMinimumSize(200, 30)
            self.form_layout.setWidget(0, QFormLayout.ItemRole.FieldRole, self.link_username)
    
            self.link_password = QLineEdit()
            self.link_password.setObjectName('link_password')
            self.link_password.setPlaceholderText("密码")
            # 设置回显模式为密码
            self.link_password.setEchoMode(QLineEdit.EchoMode.Password)
            self.link_password.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)
            self.link_password.setMaximumSize(200, 30)
            self.link_password.setMinimumSize(200, 30)
            self.form_layout.setWidget(1, QFormLayout.ItemRole.FieldRole, self.link_password)
    
            self.button_register = QPushButton("注册")
            self.button_register.setObjectName("button_register")
            self.button_register.setIcon(QIcon(":/message/icons/注册.png"))
            # 去掉边框背景
            self.button_register.setFlat(True)
            # 鼠标划过显示小手
            self.button_register.setCursor(QCursor(Qt.CursorShape.PointingHandCursor))
    
            self.button_ok = QPushButton("登录")
            self.button_ok.setObjectName("button_ok")
            self.button_ok.setIcon(QIcon(":/message/icons/登录.png"))
            # 去掉边框背景
            self.button_ok.setFlat(True)
    
            self.button_cancel = QPushButton("取消")
            self.button_cancel.setObjectName("button_cancel")
            self.button_cancel.setIcon(QIcon(":/message/icons/取消发布.png"))
            # 去掉边框背景
            self.button_cancel.setFlat(True)
            self.button_cancel.clicked.connect(lambda: quit())
    
            self.button_layout.addWidget(self.button_register)
            # 加个弹簧隔开
            self.button_layout.addItem(QSpacerItem(40, 20, QSizePolicy.Expanding, QSizePolicy.Minimum))
            self.button_layout.addWidget(self.button_ok)
            self.button_layout.addWidget(self.button_cancel)

#### 二、逻辑类 ####

class FormAddConnection(QWidget, UiFormAddConnection):
        def __init__(self, parent=None):
            super(FormAddConnection, self).__init__(parent)
            self.setup_ui(self)
            """
            业务逻辑
            """
            self.button_ok.clicked.connect(lambda: MessageDialog().success(message="登录成功", duration=3000))
            # 监听回车事件
            self.link_password.returnPressed.connect(lambda: MessageDialog().success(message="登录成功", duration=3000))

#### 三、QSS ####

/*设置背景板背景色*/
    QWidget#bg_widget{
        background-color:rgba(60,63,65,90%)
    }
    
    /*按钮*/
    QPushButton{
        /*字体-华文行楷*/
        font-family:STKaiti;
        /*字体颜色*/
    	color:rgb(64,158,255);
    	/*字体大小*/
        font-size:16px;
    }
    
    /*按钮:划过*/
    QPushButton:hover{
    	background-color: rgb(100,100,100);
    	/*圆角*/
        border-radius:5px;
    }
    
    /*按钮:按下*/
    QPushButton:pressed{
        background-color: rgb(120,120,120);
    	padding-left:5px;
    	padding-top:5px;
    }
    
    /*输入框*/
    QLineEdit{
        /*背景透明*/
        background:transparent;
        /*字体-华文行楷*/
        font-family:STKaiti;
        /*字体大小*/
        font-size:16px;
        /*字体颜色*/
        color:#1296db;
        /*边框颜色*/
        border-color:#FFFFFF;
        border-style:solid;
        border-top-width:0px;
        border-right-width:0px;
        border-bottom-width:1px;
        border-left-width:0px;
    }

#### 四、预览 ####

if __name__ == '__main__':
        app = QApplication([])
        connection = FormAddConnection()
        connection.show()
        app.exec()

![ea3817b138b049a7a0e112502115a34b.png][]

[ea3817b138b049a7a0e112502115a34b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/67432a8f5c1c4ce2bf126c2ceaeef2c2.png