Complete the basic UI

2026-02-14 09:01:50 +08:00 · 2025-06-07 11:42:23 +08:00
parent 0811720e4d
commit 44a1452251
10 changed files with 406 additions and 3 deletions
--- a/loginwidget.cpp
+++ b/loginwidget.cpp
@ -0,0 +1,123 @@
+#include "loginwidget.h"
+
+LoginWidget::LoginWidget(QWidget *parent)
+	: QWidget(parent)
+{
+	//设置本窗口的基本属性
+	this->setFixedSize(400, 350);
+	this->setWindowTitle("登录");
+	this->setWindowIcon(QIcon(":/resource/image/logo.png"));
+	this->setStyleSheet("QWidget { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); }");
+	this->setAttribute(Qt::WA_DeleteOnClose);
+
+	//创建布局管理器
+    QGridLayout* layout = new QGridLayout();
+    layout->setSpacing(0);
+    layout->setContentsMargins(50, 0, 50, 0);
+    this->setLayout(layout);
+
+    // 创建标题
+    titleLabel = new QLabel();
+    titleLabel->setText("登录");
+    titleLabel->setAlignment(Qt::AlignCenter);
+    titleLabel->setFixedHeight(50);
+    titleLabel->setStyleSheet("QLabel { font-size: 40px; font-weight: 600; }");
+
+    // 创建用户名输入框
+    QString editStyle = "QLineEdit { border: none; border-radius: 10px; font-size: 20px; background-color: rgb(240, 240, 240); padding-left:5px; }";
+    usernameEdit = new QLineEdit();
+    usernameEdit->setFixedHeight(40);
+    usernameEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    usernameEdit->setPlaceholderText("输入用户名");
+    usernameEdit->setStyleSheet(editStyle);
+
+    // 创建密码输入框
+    passwordEdit = new QLineEdit();
+    passwordEdit->setFixedHeight(40);
+    passwordEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    passwordEdit->setPlaceholderText("输入密码");
+    passwordEdit->setStyleSheet(editStyle);
+    passwordEdit->setEchoMode(QLineEdit::Password);
+
+    // 创建验证码输入框
+    verifyCodeEdit = new QLineEdit();
+    verifyCodeEdit->setFixedHeight(40);
+    verifyCodeEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    verifyCodeEdit->setPlaceholderText("输入验证码");
+    verifyCodeEdit->setStyleSheet(editStyle);
+
+    // 7. 创建显示验证码图片的控件 (此处先用 QPushButton 来表示一下, 后续进一步编写这里的逻辑)
+    //    后续会自定义 QWidget, 通过画图 api 来实现这里的验证码功能.
+     QPushButton* verifyCodeWidget = new QPushButton();
+     verifyCodeWidget->setText("验证码");
+     verifyCodeWidget->setStyleSheet("QWidget { border: none; }");
+     //verifyCodeWidget = new VerifyCodeWidget(this);
+
+    // 创建登录按钮
+    submitBtn = new QPushButton();
+    submitBtn->setText("登录");
+    submitBtn->setFixedHeight(40);
+    submitBtn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    QString btnGreenStyle = "QPushButton { border: none; border-radius: 10px; background-color: rgb(44, 182, 61); color: rgb(255, 255, 255); }";
+    btnGreenStyle += "QPushButton:pressed { background-color: rgb(240, 240, 240); }";
+    submitBtn->setStyleSheet(btnGreenStyle);
+
+    // 创建切换到手机号登录按钮
+    phoneModeBtn = new QPushButton();
+    phoneModeBtn->setFixedSize(100, 40);
+    phoneModeBtn->setText("手机号登录");
+    QString btnWhiteStyle = "QPushButton { border: none; border-radius: 10px; background-color: transparent; }";
+    btnWhiteStyle += "QPushButton:pressed { background-color: rgb(240, 240, 240); }";
+    phoneModeBtn->setStyleSheet(btnWhiteStyle);
+
+    //  创建切换模式(登录和注册)按钮
+    switchModeBtn = new QPushButton();
+    switchModeBtn->setFixedSize(100, 40);
+    switchModeBtn->setText("注册");
+    switchModeBtn->setStyleSheet(btnWhiteStyle);
+
+    // 添加到布局管理器中
+    layout->addWidget(titleLabel, 0, 0, 1, 5);
+    layout->addWidget(usernameEdit, 1, 0, 1, 5);
+    layout->addWidget(passwordEdit, 2, 0, 1, 5);
+    layout->addWidget(verifyCodeEdit, 3, 0, 1, 4);
+    layout->addWidget(verifyCodeWidget, 3, 4, 1, 1);
+    layout->addWidget(submitBtn, 4, 0, 1, 5);
+    layout->addWidget(phoneModeBtn, 5, 0, 1, 1);
+    layout->addWidget(switchModeBtn, 5, 4, 1, 1);
+
+
+    // 处理信号槽
+    //connect(switchModeBtn, &QPushButton::clicked, this, &LoginWidget::switchMode);
+    connect(switchModeBtn, &QPushButton::clicked, this, [=]() {
+        if (isLoginMode) {
+            //切换到注册模式
+            this->setWindowTitle("注册");
+            titleLabel->setText("注册");
+            submitBtn->setText("注册");
+            switchModeBtn->setText("登录");
+        }
+        else {
+            //切换到登录模式
+            this->setWindowTitle("登录");
+            titleLabel->setText("登录");
+            submitBtn->setText("登录");
+            switchModeBtn->setText("注册");
+        }
+        isLoginMode = !isLoginMode;
+        });
+
+    connect(phoneModeBtn, &QPushButton::clicked, this, [=]() {
+        // 此处还可以把 isLoginMode 这个值传到新的窗口中, 让新的窗口决定自己是登录状态还是注册状态. 大家自行尝试实现.
+        PhoneLoginWidget* phoneLoginWidget = new PhoneLoginWidget(nullptr);
+        phoneLoginWidget->show();
+
+        // 关闭当前窗口
+        this->close();
+        });
+
+    //connect(submitBtn, &QPushButton::clicked, this, &LoginWidget::clickSubmitBtn);
+    connect(submitBtn, &QPushButton::clicked, this, [=]() {
+        Toast::showMessage("Just a test message...");
+        });
+}