思维导图+实现一个登录窗口界面

QQ2024122-205851

import sys
from PyQt6.QtGui import QIcon, QPixmap, QMovie
from PyQt6.QtWidgets import QApplication, QWidget, QLineEdit, QPushButton, QLabel, QVBoxLayout

# 封装我的窗口类
class LoginWidget(QWidget):
    # 构造函数
    def __init__(self):
        # 初始化父类
        super().__init__()

        # 设置窗口标题
        self.setWindowTitle("ZENNOVAIR音乐登录")

        # 设置窗口大小
        self.resize(400, 300)

        # 设置整个窗口的背景颜色
        self.setStyleSheet("background-color: rgb(255, 255, 255);")  # 白色背景

        # 创建一个垂直布局
        v_layout = QVBoxLayout()

        # 用户图标和用户名输入框
        self.user_icon_label = QLabel(self)  # 用户图标标签
        pixmap = QPixmap("C:\\Users\\lilba\\Desktop\\4.jpg")  # 加载用户图标（请替换为你的图片文件路径）
        self.user_icon_label.setPixmap(pixmap)  # 设置图标到标签
        self.user_icon_label.setScaledContents(True)  # 设置图标自动适应标签大小
        self.user_icon_label.setFixedSize(30, 30)  # 设置图标大小（可以根据需要调整）
        v_layout.addWidget(self.user_icon_label)  # 将图标标签添加到布局（但实际上不添加到窗口，后续手动管理）

        self.username_label = QLabel("用户名:", self)  # 用户名标签
        self.username_label.setStyleSheet("color: white; background-color: rgb(64, 143, 168); padding: 5px;")  # 设置标签样式
        v_layout.addWidget(self.username_label)  # 将用户名标签添加到布局

        self.username_edit = QLineEdit(self)  # 用户名输入框
        self.username_edit.setStyleSheet("background-color: rgb(200, 200, 200); border: 1px solid rgb(64, 143, 168); padding: 10px;")  # 设置输入框样式
        v_layout.addWidget(self.username_edit)  # 将用户名输入框添加到布局

        # 动图标签
        self.gif_label = QLabel(self)  # 动图标签
        movie = QMovie("C:\\Users\\lilba\\Desktop\\7.gif")  # 加载动图文件（请替换为你的GIF文件路径）
        self.gif_label.setMovie(movie)  # 设置动图到标签
        movie.start()  # 开始播放动图
        self.gif_label.setFixedSize(100, 100)  # 设置动图大小（可以根据需要调整）
        v_layout.addWidget(self.gif_label)  # 将动图标签添加到布局（但实际上后续手动管理）

        # 密码图标和密码输入框
        self.password_icon_label = QLabel(self)  # 密码图标标签
        pixmap = QPixmap("C:\\Users\\lilba\\Desktop\\4.jpg")  # 加载密码图标（请替换为你的图片文件路径）
        self.password_icon_label.setPixmap(pixmap)  # 设置图标到标签
        self.password_icon_label.setScaledContents(True)  # 设置图标自动适应标签大小
        self.password_icon_label.setFixedSize(30, 30)  # 设置图标大小（可以根据需要调整）
        v_layout.addWidget(self.password_icon_label)  # 将图标标签添加到布局

        self.password_label = QLabel("密码:", self)  # 密码标签
        self.password_label.setStyleSheet("color: white; background-color: rgb(64, 143, 168); padding: 5px;")  # 设置标签样式
        v_layout.addWidget(self.password_label)  # 将密码标签添加到布局

        self.password_edit = QLineEdit(self)  # 密码输入框
        self.password_edit.setEchoMode(QLineEdit.EchoMode.Password)  # 设置密码模式
        self.password_edit.setStyleSheet("background-color: rgb(200, 200, 200); border: 1px solid rgb(64, 143, 168); padding: 10px;")  # 设置输入框样式
        v_layout.addWidget(self.password_edit)  # 将密码输入框添加到布局

        # 登录按钮
        self.login_btn = QPushButton("登录", self)  # 登录按钮
        self.login_btn.setStyleSheet("background-color: rgb(64, 143, 168); color: white; border: none; padding: 10px 20px; border-radius: 5px;")  # 设置按钮样式
        self.login_btn.clicked.connect(self.on_login_clicked)  # 连接按钮点击信号到槽函数

        # 由于我们不使用布局管理器，因此需要手动设置组件的位置和大小
        # 设置用户图标和用户名标签、输入框的位置
        self.user_icon_label.move(20, 20)
        self.username_label.move(60, 20)
        self.username_edit.move(110, 20)
        self.username_edit.resize(260, 30)

        # 设置动图的位置
        self.gif_label.move(150, 70)

        # 设置密码图标和密码标签、输入框的位置
        self.password_icon_label.move(20, 120)
        self.password_label.move(60, 120)
        self.password_edit.move(110, 120)
        self.password_edit.resize(260, 30)

        # 设置登录按钮的位置
        self.login_btn.move(140, 170)
        self.login_btn.resize(100, 40)

    # 登录按钮的槽函数
    def on_login_clicked(self):
        print("登录按钮被点击")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    login_widget = LoginWidget()
    login_widget.show()
    sys.exit(app.exec())