当前位置：首页 > article >正文

【Qt】无IDE的Gui程序快速开始

article 2024/10/4 23:14:04

Qt安装

在 Windows 上安装 Qt 的步骤如下：

下载 Qt 安装程序

访问 Qt 的官方网站：Qt Downloads。
点击“Download”按钮，下载 Qt Online Installer（在线安装程序）。

运行安装程序

双击下载的 QtInstaller.exe 文件，启动安装程序。

登录或注册 Qt 账户

如果你已经有 Qt 账户，可以直接登录；如果没有，需要注册一个新账户。注册是免费的，允许你下载开源版本和评估版。

选择安装方式

在安装程序中，选择合适的安装方式，这里选择开源版本：
- 开源版本：适合个人或小型项目。
- 商业版本：需要付费，适合商业项目。

选择组件

安装程序将显示可用的 Qt 版本和组件。在这里，你可以选择：
- Qt 版本：选择你想安装的 Qt 版本（例如 Qt 5.x 或 Qt 6.x），这里选择Qt 6.7。
- 编译器：选择适合你的系统的编译器（如 MSVC 或 MinGW），这里选择MinGW。
- 工具：包括 Qt Creator、Qt 文档等。
确保勾选“Qt Creator”，这是 Qt 的集成开发环境（IDE）。

设置安装路径

选择你希望安装 Qt 的目录，默认路径一般是 C:\Qt。你可以更改到你喜欢的路径。

安装

点击“Install”开始安装。这可能需要一些时间，具体取决于你选择的组件和你的网络速度。

配置环境变量

配置 Qt 和相关工具的环境变量是确保开发环境正常运行的重要步骤，具体步骤如下：

打开系统属性：
- 右键点击“此电脑”，选择“属性”，需要进入系统设置以修改环境变量。
访问高级系统设置：
- 点击“高级系统设置” ，环境变量的设置位于高级选项中。
打开环境变量设置：
- 点击“环境变量”按钮，这里可以编辑或添加系统变量。
编辑系统变量：
- 在“系统变量”中选择“Path”，点击“编辑”，Path 变量存储了可执行文件的搜索路径，修改它可以让命令行访问相应工具。
添加路径：
- 添加以下目录路径：
  - Qt 的 bin 目录，例如 C:\Qt\6.7.2\mingw_64\bin，确保可以直接调用 Qt 的动态库。
  - CMake 的 bin 目录，例如 C:\Qt\Tools\CMake_64\bin ，确保可以使用 CMake 构建项目。
  - Mingw 的 bin 目录，例如 C:\Qt\Tools\mingw1120_64\bin，确保编译器可用，以进行项目的编译。
保存并关闭：
- 保存更改并关闭所有窗口。

以下是整理后的文章结构，确保两种实现的效果相同，代码简洁，解释充分，包含详细的中文注释。

程序编写

创建项目结构

假设你的项目结构如下：

/MyQtProject
├── CMakeLists.txt
├── main.cpp
└── main.qml (仅用于 Qt Quick 项目)

Qt Widgets 实现

Qt Widgets 是 Qt 框架最早引入的 GUI 构建方式，面向传统桌面应用，基于 C++ 的类库。它提供了大量现成的控件（如按钮、文本框、菜单等），开发者通过面向对象的方式组合这些控件，构建用户界面。

CMakeLists.txt

cmake_minimum_required(VERSION 3.14)  # 设置 CMake 最小版本

project(WidgetsDemo LANGUAGES CXX)    # 定义项目名称和使用的语言

find_package(Qt6 COMPONENTS Widgets REQUIRED)  # 查找 Qt Widgets 模块

add_executable(WidgetsDemo main.cpp)  # 添加可执行文件

target_link_libraries(WidgetsDemo PRIVATE Qt6::Widgets)  # 链接 Qt Widgets 库

main.cpp

#include <QApplication>   // 引入 QApplication 类
#include <QPushButton>    // 引入 QPushButton 类
#include <QVBoxLayout>    // 引入垂直布局类
#include <QLabel>         // 引入 QLabel 类
#include <QWidget>        // 引入 QWidget 类

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);  // 创建应用实例

    QWidget window;                 // 创建主窗口
    window.setFixedSize(400, 300);  // 设置窗口大小

    QVBoxLayout layout;             // 创建垂直布局

    QLabel label("Hello, World!");  // 创建标签
    QPushButton button("点击我");    // 创建按钮

    layout.addWidget(&label);        // 添加标签到布局
    layout.addWidget(&button);       // 添加按钮到布局

    // 连接按钮点击信号与标签文本更新
    QObject::connect(&button, &QPushButton::clicked, [&]() {
        label.setText("按钮被点击了！"); // 更新文本
    });

    window.setLayout(&layout);       // 设置窗口的布局
    window.show();                   // 显示主窗口

    return app.exec();               // 启动事件循环
}

Qt Quick + QML 实现

Qt Quick 是用于开发现代化、动态用户界面的模块，适用于需要动画效果和响应式布局的应用。QML（Qt Modeling Language）是 Qt Quick 的核心语言，专门用于设计用户界面，具有声明式特点。

CMakeLists.txt

cmake_minimum_required(VERSION 3.14)  # 设置 CMake 最小版本

project(QmlDemo LANGUAGES CXX)         # 定义项目名称和使用的语言

find_package(Qt6 COMPONENTS Quick REQUIRED)  # 查找 Qt Quick 模块

add_executable(QmlDemo main.cpp)      # 添加可执行文件

target_link_libraries(QmlDemo PRIVATE Qt6::Quick)  # 链接 Qt Quick 库

main.cpp

#include <QGuiApplication>        // 引入 QGuiApplication 类
#include <QQmlApplicationEngine>  // 引入 QQmlApplicationEngine 类

int main(int argc, char *argv[]) {
    QGuiApplication app(argc, argv); // 创建应用实例

    QQmlApplicationEngine engine;    // 创建 QML 引擎
    engine.load(QUrl(QStringLiteral("file:///path/to/your/main.qml"))); // 加载 QML 文件

    return app.exec();               // 启动事件循环
}

main.qml

import QtQuick 2.15               // 导入 Qt Quick 模块
import QtQuick.Controls 2.15       // 导入 Qt Quick 控件模块

ApplicationWindow {
    visible: true                 // 窗口可见
    width: 400                    // 窗口宽度
    height: 300                   // 窗口高度
    title: "Qt Quick Demo"        // 窗口标题

    Column {
        anchors.centerIn: parent   // 垂直布局，居中显示

        Text {
            id: label              // 定义文本组件
            text: "Hello, World!" // 初始文本
        }

        Button {
            text: "点击我"          // 按钮文本
            onClicked: {
                label.text = "按钮被点击了！" // 更新文本
            }
        }
    }
}