Ask me anything
Ithy Logo
Sign in to save

使用 Qt 和 C++ 实现无需 .ui 文件的登录界面

Qt (software) - Wikipedia

在现代应用程序开发中，用户界面的设计和实现是关键环节之一。Qt 作为一个功能强大的跨平台应用框架，提供了丰富的工具和库，帮助开发者快速构建用户友好的界面。本文将详细介绍如何使用 Qt 和 C++ 实现一个登录界面，而无需依赖任何 `.ui` 文件，全程通过纯 C++ 代码完成界面和布局的创建。

目录

1. 创建项目

首先，确保您已经安装了 Qt 开发环境和 Qt Creator。接下来，按照以下步骤创建一个新的 Qt Widgets 应用程序项目：

  1. 打开 Qt Creator。
  2. 选择 File → New File or Project → Application → Qt Widgets Application。
  3. 点击 Choose，然后为项目命名，例如 LoginApp，并选择合适的存储位置。
  4. 在模板设置中，取消勾选 Generate form，以避免生成 `.ui` 文件。
  5. 点击 Finish 完成项目创建。

2. 定义主窗口类

在项目中，我们将创建一个名为 MainWindow 的类，继承自 QWidget，用于实现登录界面。以下是头文件 mainwindow.h 的内容：

头文件：mainwindow.h


#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QMessageBox>

class MainWindow : public QWidget
{
    Q_OBJECT

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

private slots:
    void onLoginClicked();
    void onCancelClicked();

private:
    QLabel *usernameLabel;
    QLabel *passwordLabel;
    QLineEdit *usernameEdit;
    QLineEdit *passwordEdit;
    QPushButton *loginButton;
    QPushButton *cancelButton;
    QVBoxLayout *mainLayout;
};

解释：

  • QLabel：用于显示文本标签，如“用户名”和“密码”。
  • QLineEdit：用于输入用户名和密码。
  • QPushButton：用于登录和取消操作的按钮。
  • QVBoxLayout 和 QHBoxLayout：用于管理控件的垂直和水平布局。
  • onLoginClicked 和 onCancelClicked：槽函数，用于处理按钮点击事件。

3. 实现主窗口类

接下来，在 mainwindow.cpp 文件中实现上述类的功能：

源文件：mainwindow.cpp


#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QWidget(parent)
{
    // 创建控件
    usernameLabel = new QLabel("用户名:", this);
    passwordLabel = new QLabel("密码:", this);
    usernameEdit = new QLineEdit(this);
    passwordEdit = new QLineEdit(this);
    loginButton = new QPushButton("登录", this);
    cancelButton = new QPushButton("取消", this);

    // 设置密码输入框为密码模式
    passwordEdit->setEchoMode(QLineEdit::Password);

    // 布局管理
    QHBoxLayout *usernameLayout = new QHBoxLayout;
    usernameLayout->addWidget(usernameLabel);
    usernameLayout->addWidget(usernameEdit);

    QHBoxLayout *passwordLayout = new QHBoxLayout;
    passwordLayout->addWidget(passwordLabel);
    passwordLayout->addWidget(passwordEdit);

    QHBoxLayout *buttonLayout = new QHBoxLayout;
    buttonLayout->addWidget(loginButton);
    buttonLayout->addWidget(cancelButton);

    mainLayout = new QVBoxLayout(this);
    mainLayout->addLayout(usernameLayout);
    mainLayout->addLayout(passwordLayout);
    mainLayout->addLayout(buttonLayout);

    setLayout(mainLayout);

    // 设置窗口标题
    setWindowTitle("登录界面");

    // 连接信号与槽
    connect(loginButton, &QPushButton::clicked, this, &MainWindow::onLoginClicked);
    connect(cancelButton, &QPushButton::clicked, this, &MainWindow::onCancelClicked);
}

MainWindow::~MainWindow()
{
    // Qt 会自动处理子对象的内存释放
}

void MainWindow::onLoginClicked()
{
    QString username = usernameEdit->text();
    QString password = passwordEdit->text();

    // 简单验证逻辑
    if (username == "admin" && password == "123456") {
        QMessageBox::information(this, "登录成功", "欢迎，" + username + "!");
    } else {
        QMessageBox::warning(this, "登录失败", "用户名或密码错误！");
        usernameEdit->clear();
        passwordEdit->clear();
        usernameEdit->setFocus();
    }
}

void MainWindow::onCancelClicked()
{
    close(); // 关闭窗口
}

详细解释：

创建和设置控件

在构造函数中，我们创建了所有必要的控件，包括标签、输入框和按钮。特别地，密码输入框使用了 setEchoMode(QLineEdit::Password) 方法，将输入内容设置为掩码形式，以保护用户隐私。

布局管理

通过使用水平布局（QHBoxLayout）和垂直布局（QVBoxLayout），我们将控件有序地排列在窗口中。这样的布局管理器能够自动适应窗口的大小变化，确保界面元素的合理排列。

信号与槽机制

Qt 的信号与槽机制使得不同组件之间能够方便地通信。在本例中，我们将登录按钮的 clicked 信号连接到 onLoginClicked 槽函数，取消按钮的 clicked 信号连接到 onCancelClicked 槽函数。当用户点击相应按钮时，这些槽函数将被触发，执行相应的逻辑。

4. 编写主函数

主函数负责实例化应用程序和主窗口，并启动事件循环。以下是 main.cpp 的内容：

主文件：main.cpp


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

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    MainWindow window;
    window.resize(300, 150); // 设置窗口大小
    window.show();

    return app.exec();
}

在这里，我们创建了一个 QApplication 对象，该对象管理着应用程序的控制流和主要设置。随后，实例化 MainWindow 类，并通过 show() 方法显示窗口。最后，调用 app.exec() 启动事件循环，使应用程序进入运行状态。

5. 构建与运行

完成代码编写后，我们需要构建并运行项目。根据项目配置的不同，可以使用不同的构建系统，如 qmake 或 CMake。以下是使用两种构建系统的示例：

使用 qmake

如果项目使用 qmake，需要创建一个 .pro 文件。以下是一个示例：


QT += core gui widgets
CONFIG += c++11

SOURCES += main.cpp \
           mainwindow.cpp

HEADERS += mainwindow.h

然后，运行以下命令进行构建：


qmake
make

使用 CMake

如果选择使用 CMake，则需要创建一个 CMakeLists.txt 文件。以下是一个示例：


cmake_minimum_required(VERSION 3.5)

project(LoginApp)

set(CMAKE_CXX_STANDARD 11)
set(CMAKE_AUTOMOC ON)

find_package(Qt6 REQUIRED COMPONENTS Widgets)

add_executable(LoginApp
    main.cpp
    mainwindow.cpp
    mainwindow.h
)

target_link_libraries(LoginApp Qt6::Widgets)

然后，运行以下命令进行构建：


mkdir build
cd build
cmake ..
make

构建完成后，生成的可执行文件将在相应的构建目录中。运行该文件，即可看到实现的登录界面。

6. 扩展功能

本文展示了一个基础的登录界面实现，但在实际应用中，可能需要更多的功能和优化。以下是一些可选的扩展功能：

6.1 输入验证

为了提高用户体验和安全性，可以添加更多的输入验证逻辑：

  • 检查用户名和密码是否为空。
  • 使用正则表达式验证用户名或密码的格式。
  • 限制密码的长度和字符类型，防止弱密码。

6.2 样式美化

通过 Qt 的样式表（QSS）可以美化界面，增强视觉效果：


setStyleSheet("
    QWidget {
        background-color: #f0f0f0;
    }
    QLabel {
        font-size: 14px;
    }
    QLineEdit {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    QPushButton {
        background-color: #4CAF50;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 3px;
    }
    QPushButton:hover {
        background-color: #45a049;
    }
");

将上述样式表代码添加到主窗口的构造函数中，可以显著改善界面的外观。

6.3 多语言支持

为了支持不同语言的用户，可以使用 Qt 的翻译功能（QTranslator）：

  • 创建翻译文件，例如 `loginapp_zh_CN.ts`。
  • 使用 Qt Linguist 对翻译文件进行翻译。
  • 在应用程序中加载对应的翻译文件： 

#include <QTranslator>
#include <QLocale>
#include <QLibraryInfo>

// 在 main 函数中添加：
QTranslator translator;
translator.load("loginapp_" + QLocale::system().name(),
                QLibraryInfo::location(QLibraryInfo::TranslationsPath));
app.installTranslator(&translator);

6.4 数据库连接

在实际应用中，用户的登录信息通常存储在数据库中。可以使用 Qt 的 QSqlDatabase 模块连接到数据库，并在登录时进行验证：


#include <QSqlDatabase>
#include <QSqlQuery>

// 在构造函数中初始化数据库连接
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
db.setDatabaseName("users.db");
if (!db.open()) {
    QMessageBox::critical(this, "数据库错误", "无法打开数据库！");
}

// 修改 onLoginClicked 函数
void MainWindow::onLoginClicked()
{
    QString username = usernameEdit->text();
    QString password = passwordEdit->text();

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

    if (query.next()) {
        QMessageBox::information(this, "登录成功", "欢迎，" + username + "!");
    } else {
        QMessageBox::warning(this, "登录失败", "用户名或密码错误！");
    }
}

6.5 记住密码功能

可以添加一个复选框，让用户选择是否记住用户名和密码：

修改界面布局


// 在头文件中添加
#include <QCheckBox>
QCheckBox *rememberMeCheckBox;

// 在构造函数中创建复选框
rememberMeCheckBox = new QCheckBox("记住密码", this);
buttonLayout->addWidget(rememberMeCheckBox);

保存和读取信息


#include <QSettings>

// 在 onLoginClicked 函数中添加
if (rememberMeCheckBox->isChecked()) {
    QSettings settings("YourCompany", "LoginApp");
    settings.setValue("username", username);
    settings.setValue("password", password);
}

// 在构造函数中读取保存的信息
QSettings settings("YourCompany", "LoginApp");
QString savedUsername = settings.value("username").toString();
QString savedPassword = settings.value("password").toString();
if (!savedUsername.isEmpty() && !savedPassword.isEmpty()) {
    usernameEdit->setText(savedUsername);
    passwordEdit->setText(savedPassword);
    rememberMeCheckBox->setChecked(true);
}

7. 总结

通过本文的详细步骤，您可以使用 Qt 和 C++ 实现一个无需 `.ui` 文件的登录界面。该方法不仅提供了更高的灵活性，还使得界面设计与逻辑实现紧密结合，更加适合需要动态生成界面的应用场景。以下是关键要点的总结：

  • 控件创建与管理：通过纯 C++ 代码创建和配置所有界面控件，确保每个元素的功能和外观符合预期。
  • 布局管理：使用 Qt 提供的布局管理器（如 QVBoxLayout 和 QHBoxLayout）组织界面元素，保证界面的自适应性和可扩展性。
  • 信号与槽机制：充分利用 Qt 的信号与槽机制，实现按钮点击等事件的处理逻辑。
  • 扩展功能：根据实际需求，添加输入验证、样式美化、多语言支持、数据库连接和记住密码等功能，提升应用的用户体验和安全性。

在实际开发中，根据项目的复杂程度和需求，可以进一步优化和扩展上述实现。例如，集成更复杂的用户认证机制、使用现代设计模式（如 MVC 或 MVVM）组织代码结构，或集成网络功能实现远程登录验证等。

希望本文能为您在 Qt 和 C++ 的开发过程中提供有价值的参考，助您快速构建功能丰富、用户友好的登录界面。


Last updated January 4, 2025

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

Ask Ithy AI