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

四、运行和测试

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

• 输入正确的用户名（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 的高级功能。