Qt实现登录界面

Black.Spider2024-09-13 5:03

本文基于Qt实现一个简单的登录界面，主要使用到Widget、button、edit等控件，基于自定义的信号槽实现界面的跳转，使用绘图设备添加背景图等。

1. 创建主界面

设计主界面的样式，并添加相关的控件。如下显示：

代码如下：

2. 创建欢迎界面（登录成功之后的界面）

欢迎界面比较简单，就添加了一个返回按钮。代码如下：

3. 添加登录界面的逻辑

cpp 复制代码

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 退出
    connect(ui->btnExit, &QPushButton::clicked, this, &QWidget::close);
    userWindow = new UserWindow();
    // 主界面接收欢迎界面的退出信号以返回到登录界面
    connect(userWindow, &UserWindow::backHome, this, [=]{
        userWindow->hide();
        this->show();
    });
    
    // 登录
    QString realPwd = "123456";
    QString realUser = "user";
    connect(ui->btnLogin, &QPushButton::clicked, this, [=]{
        QString pwd = ui->pwdEdit->text();
        QString user = ui->userNameEdit->text();
        if (pwd == realPwd && realUser == user) {
            this->hide();
            userWindow->show();
        } else {
            QMessageBox::warning(this, "提示", "账号或密码错误！");
        }
    });
}

4. 添加欢迎界面的逻辑

cpp 复制代码

UserWindow::UserWindow(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::UserWindow)
{
    ui->setupUi(this);
    // 退出按钮发送退出信号，以回退到登陆界面
    connect(ui->btnBack, &QPushButton::clicked, [=]{
        emit backHome();
    });
}

// 重写绘图事件函数，以添加背景图
void UserWindow::paintEvent(QPaintEvent* event)
{
    QPainter painter(this);
    QPixmap pix;
    pix.load(":/image/OIP-C.jfif");
    painter.drawPixmap(0, 0, this->width(), this->height(), pix);
}

在头文件中添加退出信号和绘图事件函数：

cpp 复制代码

class UserWindow : public QWidget
{
    Q_OBJECT

public:
    explicit UserWindow(QWidget *parent = nullptr);
    ~UserWindow();
    // 绘图事件函数
    void paintEvent(QPaintEvent* event);
// 在此处添加退出信号
signals:
    void backHome();

private:
    Ui::UserWindow *ui;
};

5. 实现效果

登录界面：

欢迎界面：

点击退出后即回到登陆界面。