Ask me anything
Ithy Logo
Sign in to save

使用 Qt 和 C++ 创建登录界面详解

Modern Touch UI Kit | UICloud

使用 Qt 和 C++ 开发一个登录界面是许多桌面应用程序的基础需求。Qt 提供了丰富的工具和组件，使得构建功能齐全且美观的用户界面变得相对简单。本文将详细介绍从项目准备、界面设计到功能实现及扩展的全过程，帮助你创建一个高效、安全且用户友好的登录界面。

一、项目准备

1. 安装开发环境

在开始开发之前，请确保你已经完成以下准备工作：

  • Qt 框架与 Qt Creator：从 Qt 官方网站 下载并安装 Qt 开发工具包。安装过程中，选择合适的编译器（如 MinGW 或 MSVC）。
  • C++ 编译器：确保你的系统中已安装支持 Qt 的 C++ 编译器。Qt 通常与 MinGW 或 MSVC 编译器兼容。

2. 创建新项目

启动 Qt Creator 并按照以下步骤创建一个新的 Qt Widgets 应用程序：

  1. 点击 File > New File or Project。
  2. 选择 Application > Qt Widgets Application，然后点击 Choose。
  3. 为项目命名（例如 LoginApp），选择存储路径，点击 Next。
  4. 选择合适的编译套件（默认即可），点击 Next，然后点击 Finish。

二、设计登录界面

1. 使用 Qt Designer 设计界面

Qt Designer 是一个强大的可视化设计工具，允许开发者通过拖放控件来快速构建用户界面。以下是设计登录界面的具体步骤：

  1. 在 Qt Creator 的项目导航中，双击 mainwindow.ui 文件以打开 Qt Designer。
  2. 在 Qt Designer 中，从右侧的 Widget Box 拖拽以下控件到主窗口中：
    • 两个 QLabel：用于显示“用户名”和“密码”提示。
    • 两个 QLineEdit：用于输入用户名和密码。
    • 一个 QPushButton：用于“登录”按钮。
    • 一个 QLabel（可选）：用于显示错误提示信息。
  3. 调整控件的位置和大小，确保界面美观且用户友好。
  4. 设置控件的 objectName 属性，便于在代码中引用：
    • 用户名输入框：usernameLineEdit
    • 密码输入框：passwordLineEdit
    • 登录按钮：loginButton
    • 错误提示标签：errorLabel
  5. 将密码输入框的 echoMode 属性设置为 Password，以隐藏输入的密码。

设计完成后，界面布局可能如下所示：

+-----------------------------+
| 用户名: [______________] |
| 密 码: [______________] |
| |
| [ 登录 ] |
| |
| 错误提示: |
+-----------------------------+

三、实现登录功能

1. 代码结构介绍

在 Qt Widgets 应用程序中，主要的文件包括：

  • main.cpp：程序的入口点，用于初始化应用程序并显示主窗口。
  • mainwindow.h 和 mainwindow.cpp：主窗口的头文件和实现文件，包含界面逻辑和功能实现。
  • mainwindow.ui：通过 Qt Designer 设计的用户界面文件。

2. 修改 mainwindow.h

在 mainwindow.h 文件中，定义界面组件和槽函数：

<!DOCTYPE html>

mainwindow.h



#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_loginButton_clicked();  // 登录按钮槽函数

private:
    Ui::MainWindow *ui;
};

3. 修改 mainwindow.cpp

在 mainwindow.cpp 文件中，实现槽函数逻辑：

<!DOCTYPE html>

mainwindow.cpp



#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QMessageBox>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 隐藏错误提示标签
    ui->errorLabel->setText("");
    ui->errorLabel->setStyleSheet("color: red;");
    // 连接登录按钮的点击信号到槽函数
    connect(ui->loginButton, &QPushButton::clicked, this, &MainWindow::on_loginButton_clicked);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_loginButton_clicked()
{
    QString username = ui->usernameLineEdit->text().trimmed();
    QString password = ui->passwordLineEdit->text().trimmed();

    // 基本验证：检查输入是否为空
    if (username.isEmpty() || password.isEmpty()) {
        ui->errorLabel->setText("用户名和密码不能为空！");
        return;
    }

    // 简单的用户名和密码验证
    if (username == "admin" && password == "123456") {
        QMessageBox::information(this, "登录成功", "欢迎回来，管理员！");
        // 这里可以关闭登录界面并打开主应用界面
        // this->close();
        // MainWindow *mainApp = new MainWindow();
        // mainApp->show();
    } else {
        ui->errorLabel->setText("用户名或密码错误！");
    }
}

4. 修改 main.cpp

在 main.cpp 文件中，初始化应用程序并显示主窗口：

<!DOCTYPE html>

main.cpp



#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

四、运行和测试

完成以上步骤后，编译并运行项目。你应该会看到设计好的登录界面。测试以下功能：

  • 输入正确的用户名（admin）和密码（123456），点击“登录”按钮，应该弹出“登录成功”的消息框。
  • 输入错误的用户名或密码，点击“登录”按钮，应该在错误提示标签中显示“用户名或密码错误！”
  • 尝试留空用户名或密码，点击“登录”按钮，应该提示“用户名和密码不能为空！”

五、扩展功能

1. 美化界面

为了提升用户体验，可以通过以下方式美化登录界面：

  • 设置背景图片：在 MainWindow 的构造函数中添加背景图片代码。 
    
// 设置背景图片
QPalette pal = this->palette();
pal.setBrush(QPalette::Window, QBrush(QPixmap(":/images/background.jpg").scaled(this->size())));
this->setPalette(pal);
  • 使用 Qt 样式表（QSS）：通过样式表自定义控件的外观。 
    
// 美化登录按钮
ui->loginButton->setStyleSheet("QPushButton { background-color: #4CAF50; color: white; border-radius: 5px; padding: 10px; }");

2. 无边框窗口

如果希望登录界面没有默认的窗口边框，可以使用以下代码：


// 设置无边框窗口
setWindowFlag(Qt::FramelessWindowHint);

3. 多语言支持

通过 QTranslator 类，可以为应用程序添加多语言支持：


// 在 main.cpp 中添加翻译器
QTranslator translator;
translator.load(":/translations/app_zh.qm");
a.installTranslator(&translator);
    

// 在 MainWindow 构造函数中处理语言更改
void MainWindow::changeEvent(QEvent *e)
{
    QMainWindow::changeEvent(e);
    if (e->type() == QEvent::LanguageChange) {
        ui->retranslateUi(this);
    }
}

4. 密码加密

为了提高安全性，应避免在代码中存储明文密码。可以使用 QCryptographicHash 对密码进行哈希处理：


#include <QCryptographicHash>

QString hashPassword(const QString &password) {
    QByteArray hash = QCryptographicHash::hash(password.toUtf8(), QCryptographicHash::Sha256);
    return hash.toHex();
}

在验证密码时，比较哈希值：


QString inputHash = hashPassword(password);
QString storedHash = "预先存储的哈希值";

if (inputHash == storedHash) {
    // 验证通过
} else {
    // 验证失败
}

5. 数据库集成

将用户信息存储在数据库中，并在登录时进行查询验证：

  1. 在项目的 .pro 文件中添加 QT += sql。
  2. 使用 Qt 的 QSqlDatabase 和 QSqlQuery 模块连接数据库并执行查询： 
    
#include <QSqlDatabase>
#include <QSqlQuery>
#include <QSqlError>

void MainWindow::on_loginButton_clicked()
{
    QString username = ui->usernameLineEdit->text().trimmed();
    QString password = ui->passwordLineEdit->text().trimmed();

    if (username.isEmpty() || password.isEmpty()) {
        ui->errorLabel->setText("用户名和密码不能为空！");
        return;
    }

    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
    db.setDatabaseName("users.db");
    if (!db.open()) {
        ui->errorLabel->setText("无法连接到数据库！");
        return;
    }

    QString hashedPassword = hashPassword(password);

    QSqlQuery query;
    query.prepare("SELECT * FROM users WHERE username = :username AND password = :password");
    query.bindValue(":username", username);
    query.bindValue(":password", hashedPassword);

    if (query.exec() && query.next()) {
        QMessageBox::information(this, "登录成功", "欢迎回来，" + username + "！");
    } else {
        ui->errorLabel->setText("用户名或密码错误！");
    }

    db.close();
}

6. 记住密码功能

使用 QSettings 保存用户的登录信息：


#include <QSettings>

// 登录成功后保存用户名和密码
void MainWindow::on_loginButton_clicked()
{
    // ... 登录验证逻辑 ...

    if (登录成功) {
        QSettings settings("MyCompany", "LoginApp");
        settings.setValue("username", username);
        settings.setValue("password", hashedPassword);
        // 继续后续操作
    }
}

// 在构造函数中加载保存的用户名和密码
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QSettings settings("MyCompany", "LoginApp");
    ui->usernameLineEdit->setText(settings.value("username").toString());
    ui->passwordLineEdit->setText(settings.value("password").toString());
}

7. 错误提示优化

使用 QLabel 显示错误信息，而不是弹出警告框，可以提供更流畅的用户体验：


void MainWindow::on_loginButton_clicked()
{
    QString username = ui->usernameLineEdit->text().trimmed();
    QString password = ui->passwordLineEdit->text().trimmed();

    if (username.isEmpty() || password.isEmpty()) {
        ui->errorLabel->setText("用户名和密码不能为空！");
        return;
    }

    // 假设验证逻辑
    if (验证成功) {
        ui->errorLabel->setText("");
        QMessageBox::information(this, "登录成功", "欢迎回来，" + username + "！");
    } else {
        ui->errorLabel->setText("用户名或密码错误！");
    }
}

六、完整代码示例

mainwindow.h


#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_loginButton_clicked();

private:
    Ui::MainWindow *ui;
    QString hashPassword(const QString &password);
};

mainwindow.cpp


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QMessageBox>
#include <QCryptographicHash>
#include <QSqlDatabase>
#include <QSqlQuery>
#include <QSqlError>
#include <QSettings>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 设置错误提示标签样式
    ui->errorLabel->setText("");
    ui->errorLabel->setStyleSheet("color: red;");
    
    // 加载保存的用户名和密码
    QSettings settings("MyCompany", "LoginApp");
    ui->usernameLineEdit->setText(settings.value("username").toString());
    ui->passwordLineEdit->setText(settings.value("password").toString());
    
    // 连接登录按钮的点击信号到槽函数
    connect(ui->loginButton, &QPushButton::clicked, this, &MainWindow::on_loginButton_clicked);
}

MainWindow::~MainWindow()
{
    delete ui;
}

QString MainWindow::hashPassword(const QString &password)
{
    QByteArray hash = QCryptographicHash::hash(password.toUtf8(), QCryptographicHash::Sha256);
    return hash.toHex();
}

void MainWindow::on_loginButton_clicked()
{
    QString username = ui->usernameLineEdit->text().trimmed();
    QString password = ui->passwordLineEdit->text().trimmed();

    if (username.isEmpty() || password.isEmpty()) {
        ui->errorLabel->setText("用户名和密码不能为空！");
        return;
    }

    // 连接到 SQLite 数据库
    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
    db.setDatabaseName("users.db");
    if (!db.open()) {
        ui->errorLabel->setText("无法连接到数据库！");
        return;
    }

    QString hashedPassword = hashPassword(password);

    QSqlQuery query;
    query.prepare("SELECT * FROM users WHERE username = :username AND password = :password");
    query.bindValue(":username", username);
    query.bindValue(":password", hashedPassword);

    if (query.exec() && query.next()) {
        // 登录成功，保存用户名和密码
        QSettings settings("MyCompany", "LoginApp");
        settings.setValue("username", username);
        settings.setValue("password", hashedPassword);
        
        QMessageBox::information(this, "登录成功", "欢迎回来，" + username + "！");
        // 可在此处打开主应用窗口
    } else {
        ui->errorLabel->setText("用户名或密码错误！");
    }

    db.close();
}

main.cpp


#include "mainwindow.h"
#include <QApplication>
#include <QSqlDatabase>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    
    // 初始化数据库（仅首次运行时需要）
    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
    db.setDatabaseName("users.db");
    if (!db.open()) {
        // 处理数据库打开失败
    }
    
    QSqlQuery query;
    // 创建用户表
    query.exec("CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT UNIQUE, password TEXT)");
    // 插入示例用户（admin / 123456）
    QString hashedPassword = QCryptographicHash::hash("123456".toUtf8(), QCryptographicHash::Sha256).toHex();
    query.prepare("INSERT OR IGNORE INTO users (username, password) VALUES (:username, :password)");
    query.bindValue(":username", "admin");
    query.bindValue(":password", hashedPassword);
    query.exec();
    
    MainWindow w;
    w.show();
    return a.exec();
}

七、总结

通过上述步骤，你已经成功地使用 Qt 和 C++ 创建了一个功能齐全的登录界面。这个界面不仅实现了基本的用户名和密码验证，还集成了数据库存储、密码加密、记住密码功能以及界面美化等多项功能。以下是本教程涵盖的主要内容：

  • 项目准备：安装 Qt 开发环境并创建新的 Qt Widgets 应用程序。
  • 界面设计：使用 Qt Designer 设计直观且美观的登录界面。
  • 功能实现：通过信号与槽机制实现登录功能，并进行输入验证。
  • 扩展功能：包括密码加密、数据库集成、多语言支持、界面美化和错误提示优化。

进一步优化和扩展可以参考以下资源：

doc.qt.io
Qt 官方文档
qt.io
Qt 开发者资源
stackoverflow.com
Stack Overflow 上的 Qt 问题解答

希望这篇详尽的教程能帮助你顺利开发出功能完善、安全可靠的登录界面。如有任何疑问，欢迎在相关社区寻求帮助或进一步学习 Qt 的高级功能。


Last updated January 4, 2025

AI-assisted research. Sources, methodology and corrections · Source-checked guides and tools · Explore published answers

Ask Ithy AI