C++版Qt之登录界面设计

在C++开发中，使用Qt框架可以快速构建美观且功能强大的GUI应用程序。本文将介绍如何设计一个漂亮的登录界面，包括账号和密码输入框，并确保只有验证成功后才能进入主窗口。

项目结构

文件列表

• LoginDialog.h：登录对话框的头文件
• LoginDialog.cpp：登录对话框的实现文件
• main.cpp：主函数文件

实现步骤

1. 创建项目

使用Qt Creator创建一个新的Qt Widgets Application项目。

2. 设计登录对话框

LoginDialog.h

#ifndef LOGINDIALOG_H
#define LOGINDIALOG_H

#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QMessageBox>
#include <QCheckBox>
#include <QSettings>

class LoginDialog : public QDialog {
    Q_OBJECT

public:
    LoginDialog(QWidget* parent = nullptr);

private slots:
    void onLoginClicked();

private:
    QLineEdit* usernameEdit;
    QLineEdit* passwordEdit;
    QPushButton* loginButton;
    QCheckBox* rememberCheckBox;
};

#endif // LOGINDIALOG_H

LoginDialog.cpp

#include "LoginDialog.h"
#include <QApplication>
#include <QStyleFactory>
#include <QFont>

LoginDialog::LoginDialog(QWidget* parent)
    : QDialog(parent)
{
    setWindowTitle("Login");
    setFixedSize(400, 300);
    setWindowFlags(Qt::Dialog | Qt::WindowCloseButtonHint);
    
    // 设置样式
    setStyleSheet("QDialog { background-color: #f5f5f5; }"
                  "QLabel { color: #333333; }"
                  "QLineEdit { padding: 8px; border: 1px solid #cccccc; border-radius: 4px; }"
                  "QPushButton { background-color: #4285f4; color: white; padding: 10px; border-radius: 4px; }"
                  "QPushButton:hover { background-color: #2a75f3; }"
                  "QCheckBox { color: #333333; }");
    
    // 标题
    QLabel* titleLabel = new QLabel("Welcome to the System", this);
    titleLabel->setStyleSheet("font-size: 24px; color: #1a73e8; font-weight: bold;");
    titleLabel->setAlignment(Qt::AlignCenter);
    
    // 账号输入框
    QLabel* usernameLabel = new QLabel("Username:", this);
    usernameEdit = new QLineEdit(this);
    usernameEdit->setPlaceholderText("Enter your username");
    usernameEdit->setFocus();
    
    // 密码输入框
    QLabel* passwordLabel = new QLabel("Password:", this);
    passwordEdit = new QLineEdit(this);
    passwordEdit->setPlaceholderText("Enter your password");
    passwordEdit->setEchoMode(QLineEdit::Password);
    
    // 记住密码复选框
    rememberCheckBox = new QCheckBox("Remember Password", this);
    
    // 登录按钮
    loginButton = new QPushButton("Login", this);
    loginButton->setFixedSize(120, 40);
    connect(loginButton, &QPushButton::clicked, this, &LoginDialog::onLoginClicked);
    
    // 布局
    QVBoxLayout* mainLayout = new QVBoxLayout(this);
    mainLayout->addWidget(titleLabel);
    mainLayout->addSpacing(20);
    
    QHBoxLayout* usernameLayout = new QHBoxLayout();
    usernameLayout->addWidget(usernameLabel);
    usernameLayout->addWidget(usernameEdit);
    mainLayout->addLayout(usernameLayout);
    
    QHBoxLayout* passwordLayout = new QHBoxLayout();
    passwordLayout->addWidget(passwordLabel);
    passwordLayout->addWidget(passwordEdit);
    mainLayout->addLayout(passwordLayout);
    
    QHBoxLayout* rememberLayout = new QHBoxLayout();
    rememberLayout->addStretch();
    rememberLayout->addWidget(rememberCheckBox);
    mainLayout->addLayout(rememberLayout);
    
    mainLayout->addSpacing(20);
    
    QHBoxLayout* buttonLayout = new QHBoxLayout();
    buttonLayout->addStretch();
    buttonLayout->addWidget(loginButton);
    mainLayout->addLayout(buttonLayout);
    
    mainLayout->addStretch();
    
    // 读取记住的用户名和密码
    QSettings settings("MyCompany", "MyApp");
    if (settings.contains("user")) {
        usernameEdit->setText(settings.value("user").toString());
        passwordEdit->setText(settings.value("pass").toString());
        rememberCheckBox->setChecked(true);
    }
}

void LoginDialog::onLoginClicked()
{
    QString username = usernameEdit->text().trimmed();
    QString password = passwordEdit->text();
    
    if (username.isEmpty() || password.isEmpty()) {
        QMessageBox::warning(this, "Warning", "Username and password cannot be empty");
        return;
    }
    
    // 这里可以添加你的验证逻辑
    // 例如连接数据库或验证用户名密码
    if (username == "admin" && password == "123456") {
        // 验证成功
        // 保存记住密码的设置
        QSettings settings("MyCompany", "MyApp");
        if (rememberCheckBox->isChecked()) {
            settings.setValue("user", username);
            settings.setValue("pass", password);
        } else {
            settings.remove("user");
            settings.remove("pass");
        }
        
        accept(); // 关闭对话框并返回接受状态
    } else {
        // 验证失败
        QMessageBox::warning(this, "Error", "Incorrect username or password");
        passwordEdit->clear();
        passwordEdit->setFocus();
    }
}

3. 修改主函数

main.cpp

#include "MainWindow.h"
#include "LoginDialog.h"
#include <QApplication>
#include <QStyleFactory>

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);
    
    // 设置应用样式
    app.setStyle("Fusion");
    
    // 显示登录对话框
    LoginDialog loginDialog;
    if (loginDialog.exec() == QDialog::Accepted) {
        // 登录成功，显示主窗口
        MainWindow mainWindow;
        mainWindow.show();
        return app.exec();
    } else {
        // 登录取消或失败，退出应用
        return 0;
    }
}

常见问题及解决方法

1. QStyleFactory 和 create 未定义

• 包含正确的头文件：

  #include <QStyleFactory>
  

• 检查Qt版本：
  确保你的Qt版本支持 QStyleFactory::create。如果版本较低，可以使用以下代码设置样式：

  app.setStyle("Fusion");
  

2. 编码问题 (C4819 警告)

• 将文件保存为UTF-8编码：
  在Visual Studio中，打开文件，点击“文件”->“高级保存选项”，选择“UTF-8”编码，然后保存文件。

3. 类型转换问题 (C4267 警告)

• 显式类型转换：
  在相关代码中使用 static_cast 进行显式类型转换：

  Standard_Integer value = static_cast<Standard_Integer>(someSizeTVariable);
  

总结

通过上述步骤，你可以设计一个美观且功能完善的登录界面。该界面支持记住密码功能，并且只有验证成功后才能进入主窗口。根据需要，你可以进一步定制界面样式和验证逻辑，以满足具体的应用需求。