QT-开发环境搭建

使用 CLion 搭建 QT 5.14.2 开发环境:从安装到 CI 部署的完整指南

在 Windows 平台上,Qt 结合 CLion 能提供流畅的跨平台开发体验。本文将手把手教你搭建基于 Qt 5.14.2MSVC 2019 的开发环境,覆盖从环境配置到 CI 部署的全流程。


一、下载并安装 Qt 5.14.2

关键点:Qt 5.14.2 仅支持 MSVC 2019,不兼容 MSVC 2022(需注意版本匹配)

  1. 访问 Qt 5.14.2 下载页面
  2. 下载 Windows 64-bit 版本:
    • qt-opensource-windows-x86-5.14.2.exe
  3. 运行安装程序:
    • 选择安装路径(建议使用英文路径,如 D:\Qt\5.14.2\msvc2019_64
    • 组件选择 中勾选:
      • MSVC 2019 64-bit
      • Qt Widgets
      • Qt Quick
      • Qt Network
    • 点击 下一步 完成安装

💡 重要提示:Qt 5.14.2 仅支持 MSVC 2019,若需 MSVC 2022 请升级到 Qt 5.15+。本文使用 5.14.2 兼容 MSVC 2019。


二、安装 CLion(使用 Scoop)

Scoop 是 Windows 命令行包管理器,比手动安装更高效

# 安装 CLion
scoop install clion

✅ 安装后,通过 clion 命令在 PowerShell 中启动 CLion


三、安装 MSVC 2019 工具集

使用 Visual Studio Build Tools 安装核心组件

  1. 下载 Visual Studio Build Tools
  2. 运行 vs_BuildTools.exe
  3. 选择 “C++ 桌面开发” 工作负载
  4. 工作负载选项 中勾选:
    • C++ 核心桌面功能
    • MSVC v142 - VS 2019 C++ x64/x86 编译器
    • Windows 10 SDK
    • ATL for C++
    • C++ Build Insights(推荐)
    • C++ MFC(推荐)
    • IncrediBuild(可选)
    • C++ Clang tools(可选)
  5. 点击 安装 等待完成

⚠️ 关键路径:安装后 MSVC 2019 位于 C:\Program Files\Microsoft Visual Studio\2019\BuildTools\VC\Tools\MSVC\14.29.30133\bin\Hostx64\x64


四、可选:安装额外 Qt 模块

通过 Qt Maintenance Tool 安装扩展模块

  1. 运行 D:\Qt\5.14.2\msvc2019_64\MaintenanceTool.exe
  2. 选择 “Add or remove components”
  3. 勾选需要的模块(例如):
    • Qt Charts(图表功能)
    • Qt Data Visualization(3D 数据可视化)
    • Qt WebEngine(浏览器集成)
    • Qt SerialPort(串口通信)
  4. 点击 “Apply Changes” 安装

五、配置 CLion 环境

  1. 打开 CLion → File → Settings → Build, Execution, Deployment → Toolchains
  2. 点击 + 添加新工具链:
    • Name: MSVC 2019
    • C++ Compiler: C:\Program Files\Microsoft Visual Studio\2019\BuildTools\VC\Tools\MSVC\14.29.30133\bin\Hostx64\x64\cl.exe
    • CMake: 选择系统 CMake(如 C:\Program Files\CMake\bin\cmake.exe

✅ 验证:CLion 会自动检测 Qt 路径,显示 “Qt 5.14.2 (MSVC 2019 64-bit)”


第六章 创建 Demo 项目并开发

6.1 创建新项目

6.1.1 在 CLion 中创建 Qt 项目

  1. 启动 CLion:在开始菜单中找到 CLion 并打开
  2. 创建新项目
    • 点击菜单栏的 FileNewProject
    • 在弹出的窗口中,选择 Qt Widgets Application,点击 Next
  3. 配置项目信息
    • Project name: QtDemo
    • Location: 选择一个合适的路径(建议使用英文路径,如 D:\Projects\QtDemo
    • Qt version: 从下拉菜单中选择 Qt 5.14.2 (MSVC 2019 64-bit)
    • Kit: 选择 MSVC 2019 (x64)
  4. 点击 Finish,CLion 将自动创建项目结构

6.1.2 项目结构说明

项目创建完成后,CLion 会生成以下文件结构:

QtDemo/
├── CMakeLists.txt
├── main.cpp
├── mainwindow.h
├── mainwindow.cpp
├── mainwindow.ui
└── QtDemo.pro
  • CMakeLists.txt: 项目构建配置文件
  • main.cpp: 程序入口文件
  • mainwindow.h: 主窗口类头文件
  • mainwindow.cpp: 主窗口类实现文件
  • mainwindow.ui: Qt Designer 设计的 UI 文件
  • QtDemo.pro: Qt 项目配置文件

6.2 设计 UI 界面

6.2.1 使用 Qt Designer 编辑界面

  1. 双击 mainwindow.ui:在 CLion 中打开 Qt Designer
  2. 添加 UI 组件
    • 从左侧工具箱拖拽以下组件到主窗口:
      • QLineEdit(输入框,命名为 lineEdit
      • QPushButton(按钮,命名为 pushButton
      • QLabel(标签,命名为 label
      • QGroupBox(分组框,命名为 groupBox
    • 调整组件大小和位置,使界面布局美观
  3. 设置组件属性
    • 双击 pushButton,在 text 属性中输入 “Submit”
    • 双击 label,在 text 属性中输入 “Result will appear here”
    • 双击 lineEdit,在 placeholderText 属性中输入 “Enter text here”

6.2.2 保存 UI 文件

点击顶部工具栏的保存图标(磁盘图标)或按 Ctrl + S 保存 UI 文件。

6.3 添加功能代码

6.3.1 实现按钮点击事件

  1. 打开 mainwindow.cpp 文件
  2. 在构造函数中添加信号-槽连接
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 设置窗口标题和大小
    setWindowTitle("Qt Demo Application");
    resize(400, 300);
    
    // 添加按钮点击事件
    connect(ui->pushButton, &QPushButton::clicked, this, [this]() {
        // 获取输入框文本
        QString inputText = ui->lineEdit->text();
        // 设置标签文本
        ui->label->setText(inputText);
        
        // 显示输入的文本
        qDebug() << "User entered:" << inputText;
    });
}

6.3.2 完整的 mainwindow.cpp 代码

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

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 设置窗口标题和大小
    setWindowTitle("Qt Demo Application");
    resize(400, 300);
    
    // 添加按钮点击事件
    connect(ui->pushButton, &QPushButton::clicked, this, [this]() {
        // 获取输入框文本
        QString inputText = ui->lineEdit->text();
        // 设置标签文本
        ui->label->setText(inputText);
        
        // 显示输入的文本到控制台
        qDebug() << "User entered:" << inputText;
    });
}

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

6.3.3 完整的 mainwindow.h 代码

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

6.3.4 完整的 main.cpp 代码

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

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    // 设置应用程序的样式(可选)
    app.setStyle("Fusion");
    
    // 创建主窗口
    MainWindow window;
    window.show();
    
    // 启动应用程序事件循环
    return app.exec();
}

6.4 单元测试

6.4.1 创建测试文件

  1. 创建新文件

    • 右键点击项目目录 → NewFile
    • 文件名:test_mainwindow.cpp
    • 保存到项目根目录
  2. 添加测试代码

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

class TestMainWindow : public QObject
{
    Q_OBJECT

private slots:
    void testWindowCreation();
    void testButtonFunctionality();
    void testInputValidation();
};

void TestMainWindow::testWindowCreation()
{
    MainWindow w;
    w.show();
    QVERIFY(w.isVisible());
    QCOMPARE(w.windowTitle(), QString("Qt Demo Application"));
}

void TestMainWindow::testButtonFunctionality()
{
    MainWindow w;
    w.show();
    
    // 模拟输入
    w.ui->lineEdit->setText("Hello, Qt!");
    
    // 模拟按钮点击
    w.ui->pushButton->click();
    
    // 验证标签文本
    QCOMPARE(w.ui->label->text(), QString("Hello, Qt!"));
}

void TestMainWindow::testInputValidation()
{
    MainWindow w;
    w.show();
    
    // 测试空输入
    w.ui->lineEdit->setText("");
    w.ui->pushButton->click();
    QCOMPARE(w.ui->label->text(), QString(""));
    
    // 测试特殊字符
    w.ui->lineEdit->setText("!@#$%^&*()");
    w.ui->pushButton->click();
    QCOMPARE(w.ui->label->text(), QString("!@#$%^&*()"));
}

QTEST_MAIN(TestMainWindow)
#include "test_mainwindow.moc"

6.4.2 配置 CMake 以包含测试

  1. 编辑 CMakeLists.txt,在文件末尾添加:
# 添加单元测试
add_executable(QtDemoTest test_mainwindow.cpp)
target_link_libraries(QtDemoTest Qt5::Core Qt5::Gui Qt5::Widgets Qt5::Test)

6.4.3 运行测试

  1. 在 CLion 中运行测试
    • 右键点击 test_mainwindow.cpp 文件
    • 选择 Run 'test_mainwindow.cpp'
  2. 测试结果
    • 控制台将显示测试通过信息
    • 如果测试失败,会显示具体错误信息

6.5 调试

6.5.1 添加断点

  1. mainwindow.cppconnect 语句前添加断点
    • 点击行号左侧的灰色区域,会出现一个红色圆点
    • 也可以在 qDebug() 语句前添加断点

6.5.2 启动调试

  1. 点击 CLion 左侧工具栏的 “Debug” 按钮(虫子图标)
  2. 或者按 Shift + F9
  3. 选择 “QtDemo” 作为调试配置

6.5.3 调试过程

  1. 程序暂停在断点处,可以查看变量值:
    • inputText: 输入框的文本
    • ui: UI 对象
    • pushButton: 按钮对象
  2. 使用调试面板
    • Step Over (F8): 逐行执行,不进入函数
    • Step Into (F7): 进入函数调用
    • Step Out (Shift + F8): 退出当前函数
  3. 查看控制台输出
    • qDebug() 输出将显示在 CLion 的 “Run” 窗口

6.6 编译与打包

6.6.1 编译项目

  1. 点击 CLion 左侧工具栏的 “Build” 按钮(锤子图标)
  2. 或者按 Ctrl + F9
  3. 编译完成后,可执行文件位于:
    D:\Projects\QtDemo\build\Debug\QtDemo.exe

6.6.2 打包可执行文件

  1. 复制必要的 Qt 依赖文件

    • 从 Qt 安装目录的 bin 文件夹复制以下文件:
      Qt5Core.dll
      Qt5Gui.dll
      Qt5Widgets.dll
      Qt5Cored.dll
      Qt5Guid.dll
      Qt5Widgetsd.dll
      qwindows.dll
      icudt58.dll
      icuin58.dll
      icuuc58.dll
    • 目标路径:D:\Projects\QtDemo\build\Debug
  2. 创建打包脚本(Windows PowerShell):

# 设置变量
$qtBinPath = "D:\Qt\5.14.2\msvc2019_64\bin"
$buildPath = "D:\Projects\QtDemo\build\Debug"

# 复制所有依赖的 DLL 文件
Copy-Item -Path "$qtBinPath\*.dll" -Destination $buildPath -Force

# 添加额外的 ICU 文件
Copy-Item -Path "$qtBinPath\icudt58.dll" -Destination $buildPath -Force
Copy-Item -Path "$qtBinPath\icuin58.dll" -Destination $buildPath -Force
Copy-Item -Path "$qtBinPath\icuuc58.dll" -Destination $buildPath -Force

Write-Host "Packaging complete! Executable located at $buildPath\QtDemo.exe"
  1. 运行打包脚本
    • 将脚本保存为 package.ps1
    • 在 PowerShell 中执行:.\package.ps1

6.6.3 验证打包结果

  1. 双击 build\Debug\QtDemo.exe 运行应用程序
  2. 功能验证
    • 在输入框中输入文本
    • 点击 “Submit” 按钮
    • 验证标签是否显示输入的文本
    • 检查控制台输出是否显示输入内容

6.7 项目结构总结

QtDemo/
├── CMakeLists.txt
├── main.cpp
├── mainwindow.h
├── mainwindow.cpp
├── mainwindow.ui
├── QtDemo.pro
├── test_mainwindow.cpp
└── build/
    └── Debug/
        ├── QtDemo.exe
        ├── Qt5Core.dll
        ├── Qt5Gui.dll
        ├── Qt5Widgets.dll
        ├── Qt5Cored.dll
        ├── Qt5Guid.dll
        ├── Qt5Widgetsd.dll
        ├── qwindows.dll
        ├── icudt58.dll
        ├── icuin58.dll
        └── icuuc58.dll

6.8 运行结果示例

  1. 应用程序界面

    +-------------------------------------+
    | [Enter text here] [Submit]          |
    |                                     |
    | Result will appear here             |
    +-------------------------------------+
  2. 用户操作

    • 在输入框中输入 “Hello, Qt!”
    • 点击 “Submit” 按钮
  3. 预期结果

    • 标签显示 “Hello, Qt!”
    • 控制台输出:User entered: "Hello, Qt!"

6.9 常见问题解决

6.9.1 无法找到 Qt5Core.dll

症状:运行应用程序时提示 “Qt5Core.dll 未找到”

解决方法

  1. 确认已将所有 Qt 依赖文件复制到可执行文件目录
  2. 检查 Qt 安装路径是否正确
  3. 确保使用的是与 Qt 版本匹配的 MSVC 编译器

6.9.2 单元测试失败

症状:测试运行时出现错误

解决方法

  1. 确认 QTEST_MAIN(TestMainWindow) 语句在文件末尾
  2. 确认 #include "test_mainwindow.moc" 语句存在
  3. 检查测试代码中的组件名称是否与 UI 中一致

6.9.3 调试时程序崩溃

症状:调试时应用程序立即崩溃

解决方法

  1. 确认在 MainWindow 构造函数中调用了 ui->setupUi(this)
  2. 确认在 MainWindow 析构函数中删除了 ui
  3. 检查 UI 文件是否正确加载

6.10 进阶功能扩展

6.10.1 添加菜单栏

  1. 在 Qt Designer 中

    • 添加 QMenuBar 组件
    • 添加 QMenuQAction 组件
    • 设置菜单项文本和功能
  2. mainwindow.cpp

    // 创建菜单栏
    QMenuBar *menuBar = new QMenuBar(this);
    setMenuBar(menuBar);
    
    // 添加文件菜单
    QMenu *fileMenu = menuBar->addMenu("File");
    
    // 添加退出动作
    QAction *exitAction = new QAction("Exit", this);
    connect(exitAction, &QAction::triggered, qApp, &QApplication::quit);
    fileMenu->addAction(exitAction);

6.10.2 添加状态栏

  1. mainwindow.cpp
    // 创建状态栏
    statusBar()->showMessage("Ready");
    
    // 更新状态栏消息
    connect(ui->pushButton, &QPushButton::clicked, [=]() {
        statusBar()->showMessage("Text entered: " + ui->lineEdit->text(), 3000);
    });

6.10.3 实现国际化支持

  1. 创建翻译文件

    • 在 CLion 中,点击 ToolsQtLinguistCreate New Translation
    • 选择语言(如 “English”)
  2. main.cpp

    // 加载翻译文件
    QTranslator translator;
    translator.load("QtDemo_en");
    app.installTranslator(&translator);
  3. 在 UI 文件中

    • 对所有需要翻译的文本添加 tr() 包装
    • 例如:tr("Submit")

6.11 总结

通过本章,您已经掌握了以下关键技能:

✅ 创建 Qt 项目并配置 UI 界面
✅ 实现基本功能(按钮事件、输入处理)
✅ 编写单元测试验证功能
✅ 使用 CLion 进行调试
✅ 编译和打包应用程序
✅ 扩展功能(菜单栏、状态栏、国际化)

这些技能是 Qt 开发的基础,您可以基于此进一步开发更复杂的桌面应用程序。接下来,您可以尝试探索 Qt 的更多功能,如图形绘制、网络通信、数据库连接等。

第七章 常见 Qt 组件的开发及使用介绍

在 Qt 开发中,组件(Widgets)是构建用户界面的核心元素。本章将详细介绍 Qt 中最常用的组件及其使用方法,涵盖从基础到进阶的使用场景,并特别关注在 Windows 10 x86/x64/arm/arm64 架构下的兼容性问题。


7.1 Qt 组件概述

Qt 提供了丰富的 UI 组件库,分为以下几类:

组件类别 常见组件 用途
基础控件 QPushButton, QLineEdit, QLabel, QComboBox 基本交互元素
容器组件 QWidget, QGroupBox, QTabWidget 布局和组织界面元素
数据展示 QTableWidget, QTreeView, QListView 显示和操作数据
输入组件 QPlainTextEdit, QSpinBox, QSlider 用户输入和控制
高级组件 QWebEngineView, QCalendarWidget 特殊功能组件

7.2 基础组件详解与使用示例

7.2.1 QPushButton(按钮组件)

功能:创建可点击的按钮,触发特定操作。

使用场景:提交表单、执行命令、导航等。

代码示例

// 创建按钮
QPushButton *button = new QPushButton("Click Me", this);
button->setGeometry(50, 50, 100, 30);  // x, y, width, height

// 连接按钮点击事件
connect(button, &QPushButton::clicked, this, [this]() {
    qDebug() << "Button clicked!";
    // 执行操作
});

跨架构注意事项

  • 按钮文本和样式在所有架构下兼容
  • 确保在 ARM 架构上使用 QApplication::setAttribute(Qt::AA_UseHighDpiPixmaps, true); 以支持高分辨率显示

7.2.2 QLineEdit(单行输入框)

功能:用于输入和编辑单行文本。

使用场景:表单输入、搜索框、设置项等。

代码示例

// 创建输入框
QLineEdit *lineEdit = new QLineEdit(this);
lineEdit->setGeometry(50, 100, 200, 30);
lineEdit->setPlaceholderText("Enter text here");

// 获取输入内容
connect(lineEdit, &QLineEdit::returnPressed, this, [this]() {
    QString text = lineEdit->text();
    qDebug() << "User entered:" << text;
});

// 设置输入限制
lineEdit->setValidator(new QIntValidator(0, 100, this));

跨架构注意事项

  • 输入验证在所有架构下一致
  • 在 ARM 架构上,确保使用 QFont 时指定系统默认字体,避免字体渲染问题

7.2.3 QLabel(标签组件)

功能:显示静态文本或图像。

使用场景:显示说明文字、状态信息、图片等。

代码示例

// 创建标签
QLabel *label = new QLabel("Hello, Qt!", this);
label->setGeometry(50, 150, 200, 30);
label->setAlignment(Qt::AlignCenter);

// 设置标签样式
label->setStyleSheet("QLabel { color: blue; font-size: 14px; }");

// 动态更新文本
QPushButton *updateButton = new QPushButton("Update", this);
connect(updateButton, &QPushButton::clicked, this, [label]() {
    label->setText("Updated Text!");
});

跨架构注意事项

  • 样式表在所有架构下兼容
  • 在 ARM 架构上,避免使用过大的图片,防止内存不足

7.3 容器组件详解与使用示例

7.3.1 QWidget(基础容器)

功能:所有 UI 组件的基类,用于组织和布局其他组件。

使用场景:作为主窗口或子窗口的容器。

代码示例

// 创建自定义容器
QWidget *container = new QWidget(this);
container->setGeometry(20, 20, 300, 200);
container->setStyleSheet("background-color: #f0f0f0; border: 1px solid #ccc;");

// 添加子组件
QPushButton *btn1 = new QPushButton("Button 1", container);
btn1->setGeometry(20, 20, 80, 30);

QPushButton *btn2 = new QPushButton("Button 2", container);
btn2->setGeometry(110, 20, 80, 30);

跨架构注意事项

  • 所有属性在不同架构下行为一致
  • 在 ARM 架构上,避免使用过大的窗口尺寸,防止内存溢出

7.3.2 QGroupBox(分组框)

功能:将相关控件分组,提供视觉分隔。

使用场景:表单中的不同功能区域。

代码示例

// 创建分组框
QGroupBox *groupBox = new QGroupBox("User Information", this);
groupBox->setGeometry(50, 50, 300, 150);

// 添加布局
QVBoxLayout *layout = new QVBoxLayout;
layout->addWidget(new QLabel("Name:"));
layout->addWidget(new QLineEdit());
layout->addWidget(new QLabel("Email:"));
layout->addWidget(new QLineEdit());
groupBox->setLayout(layout);

跨架构注意事项

  • 布局管理在所有架构下一致
  • 在 ARM 架构上,确保使用 QSizePolicy 正确设置组件大小

7.3.3 QTabWidget(选项卡组件)

功能:提供多页界面,通过选项卡切换内容。

使用场景:复杂设置界面、多步骤表单。

代码示例

// 创建选项卡
QTabWidget *tabWidget = new QTabWidget(this);
tabWidget->setGeometry(50, 50, 400, 300);

// 添加选项卡
QWidget *tab1 = new QWidget;
tab1->setLayout(new QVBoxLayout);
tab1->layout()->addWidget(new QLabel("Content of Tab 1"));
tabWidget->addTab(tab1, "Tab 1");

QWidget *tab2 = new QWidget;
tab2->setLayout(new QVBoxLayout);
tab2->layout()->addWidget(new QLabel("Content of Tab 2"));
tabWidget->addTab(tab2, "Tab 2");

跨架构注意事项

  • 选项卡组件在所有架构下行为一致
  • 在 ARM 架构上,确保选项卡文本使用 UTF-8 编码

7.4 数据展示组件详解与使用示例

7.4.1 QTableWidget(表格组件)

功能:显示和编辑表格数据。

使用场景:数据列表、表格视图、电子表格。

代码示例

// 创建表格
QTableWidget *table = new QTableWidget(5, 3, this);
table->setGeometry(50, 50, 400, 200);

// 设置表头
table->setHorizontalHeaderItem(0, new QTableWidgetItem("ID"));
table->setHorizontalHeaderItem(1, new QTableWidgetItem("Name"));
table->setHorizontalHeaderItem(2, new QTableWidgetItem("Age"));

// 填充数据
for (int i = 0; i < 5; ++i) {
    table->setItem(i, 0, new QTableWidgetItem(QString::number(i)));
    table->setItem(i, 1, new QTableWidgetItem(QString("User %1").arg(i)));
    table->setItem(i, 2, new QTableWidgetItem(QString::number(20 + i)));
}

// 设置表格属性
table->setEditTriggers(QAbstractItemView::NoEditTriggers);  // 禁止编辑
table->setSelectionBehavior(QAbstractItemView::SelectRows);  // 行选择

跨架构注意事项

  • 表格数据在所有架构下一致
  • 在 ARM 架构上,避免表格行数过多,防止内存占用过高

7.4.2 QTreeView(树形视图)

功能:显示层次结构数据。

使用场景:文件系统浏览器、目录树、组织结构。

代码示例

// 创建树形视图
QTreeView *treeView = new QTreeView(this);
treeView->setGeometry(50, 50, 300, 300);

// 创建模型
QStandardItemModel *model = new QStandardItemModel(0, 2, this);
model->setHorizontalHeaderItem(0, new QStandardItem("Name"));
model->setHorizontalHeaderItem(1, new QStandardItem("Type"));

// 添加根节点
QStandardItem *root = model->invisibleRootItem();
QStandardItem *folder1 = new QStandardItem("Folder 1");
folder1->appendRow(new QStandardItem("File 1"));
folder1->appendRow(new QStandardItem("File 2"));
root->appendRow(folder1);

// 设置模型
treeView->setModel(model);

跨架构注意事项

  • 树形结构数据在所有架构下一致
  • 在 ARM 架构上,确保树形数据量适中,避免内存问题

7.5 输入组件详解与使用示例

7.5.1 QComboBox(下拉列表)

功能:提供下拉选择列表。

使用场景:选择选项、设置项、分类筛选。

代码示例

// 创建下拉列表
QComboBox *comboBox = new QComboBox(this);
comboBox->setGeometry(50, 50, 150, 30);

// 添加选项
comboBox->addItem("Option 1");
comboBox->addItem("Option 2");
comboBox->addItem("Option 3");

// 连接选择事件
connect(comboBox, &QComboBox::currentIndexChanged, this, [this](int index) {
    qDebug() << "Selected index:" << index;
    qDebug() << "Selected text:" << comboBox->currentText();
});

跨架构注意事项

  • 下拉列表在所有架构下行为一致
  • 在 ARM 架构上,确保选项文本使用 UTF-8 编码

7.5.2 QSlider(滑块)

功能:通过拖动滑块调整数值。

使用场景:音量控制、亮度调节、数值选择。

代码示例

// 创建滑块
QSlider *slider = new QSlider(Qt::Horizontal, this);
slider->setGeometry(50, 50, 200, 30);
slider->setMinimum(0);
slider->setMaximum(100);
slider->setValue(50);

// 连接滑块变化事件
connect(slider, &QSlider::valueChanged, this, [this](int value) {
    qDebug() << "Slider value changed to:" << value;
    // 更新界面
    updateSliderValue(value);
});

跨架构注意事项

  • 滑块控件在所有架构下行为一致
  • 在 ARM 架构上,确保滑块范围合理,避免过大范围导致精度问题

7.6 高级组件详解与使用示例

7.6.1 QWebEngineView(网页视图)

功能:嵌入 Web 浏览器,显示网页内容。

使用场景:显示在线文档、嵌入网页应用。

代码示例

// 创建网页视图
QWebEngineView *webView = new QWebEngineView(this);
webView->setGeometry(50, 50, 800, 600);

// 加载网页
webView->load(QUrl("https://www.qt.io"));

// 确保在 ARM 架构上正确加载
#if defined(Q_OS_WIN)
    // Windows 专用设置
    webView->page()->profile()->setHttpUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36");
#else
    // 其他平台
    webView->page()->profile()->setHttpUserAgent("Qt WebEngine");
#endif

跨架构注意事项

  • QWebEngineView 在 x86/x64 架构下完全支持
  • 在 ARM 架构上,需要安装 Qt WebEngine 的 ARM 版本
  • 确保在 ARM 架构上使用正确的用户代理(User Agent)

7.6.2 QCalendarWidget(日历组件)

功能:显示日历,选择日期。

使用场景:日期选择器、日程安排。

代码示例

// 创建日历
QCalendarWidget *calendar = new QCalendarWidget(this);
calendar->setGeometry(50, 50, 300, 200);

// 连接日期选择事件
connect(calendar, &QCalendarWidget::clicked, this, [this](const QDate &date) {
    qDebug() << "Selected date:" << date.toString("yyyy-MM-dd");
    
    // 更新界面
    updateCalendarSelection(date);
});

跨架构注意事项

  • 日历组件在所有架构下行为一致
  • 在 ARM 架构上,确保系统区域设置正确,避免日期格式问题

7.7 跨架构编译与注意事项

7.7.1 架构选择与编译

在 Qt 项目中,需要针对不同架构进行编译:

架构 编译命令 适用场景
x86 qmake -spec win32-msvc 32位 Windows 系统
x64 qmake -spec win32-msvc 64位 Windows 系统
ARM qmake -spec win32-msvc ARM 32位 Windows 系统
ARM64 qmake -spec win32-msvc ARM 64位 Windows 系统

注意:Qt 的 MSVC 构建工具链在所有架构下使用相同的命令,但需要安装对应架构的 Qt 开发包。


7.7.2 架构兼容性最佳实践

  1. 使用 Qt 的跨平台 API

    • 避免使用特定于架构的系统调用
    • 使用 QOperatingSystemVersion 检查系统版本
  2. 字体和布局处理

    // 确保高分辨率支持
    if (QOperatingSystemVersion::current() >= QOperatingSystemVersion::Windows10) {
        QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
        QApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);
    }
  3. 资源文件处理

    • 为不同架构提供适当的资源
    • 使用 QResource 加载资源,避免路径问题
  4. 测试不同架构

    • 在 x86、x64、ARM、ARM64 上分别测试
    • 使用 Windows 10 的 ARM64 版本进行测试

7.8 常见问题与解决方案

7.8.1 问题:ARM 架构上 UI 显示异常

症状:在 ARM 设备上,UI 元素显示不正确、文字模糊

解决方案

  1. 确保设置了高分辨率支持:
    QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);
  2. 使用 QFont 设置适当的字体大小:
    QFont font("Segoe UI", 9);
    if (QApplication::primaryScreen()->physicalDotsPerInch() > 96) {
        font.setPointSize(10);
    }
    QApplication::setFont(font);

7.8.2 问题:ARM 架构上无法加载 DLL

症状:在 ARM 设备上运行时提示 “Qt5Core.dll 未找到”

解决方案

  1. 确保安装了 ARM 架构的 Qt 库
  2. 在应用程序目录中包含所有必要的 Qt DLL:
    • Qt5Core.dll
    • Qt5Gui.dll
    • Qt5Widgets.dll
    • Qt5Cored.dll
    • Qt5Guid.dll
    • Qt5Widgetsd.dll
    • qwindows.dll
    • icudt58.dll
    • icuin58.dll
    • icuuc58.dll
  3. 对于 ARM64,确保使用 ARM64 版本的 DLL

7.8.3 问题:不同架构下行为不一致

症状:在 x64 上正常运行,但在 ARM 上出现崩溃

解决方案

  1. 使用 QOperatingSystemVersion 检查系统架构:
    if (QOperatingSystemVersion::current() >= QOperatingSystemVersion::Windows10) {
        if (QOperatingSystemVersion::current().architecture() == QOperatingSystemVersion::Arm64) {
            // ARM64 专用代码
        }
    }
  2. 避免使用指针算术或特定于架构的内存操作
  3. 在 ARM 架构上使用 qDebug() 记录详细信息,便于调试

结语

通过本教程,你已成功搭建:
Qt 5.14.2 + MSVC 2019 开发环境
CLion 智能开发(代码补全、调试、单元测试)
Gitea CI 自动化构建

现在可以开始开发你的第一个 Qt 应用!从简单的窗口程序到复杂桌面应用,Qt 与 CLion 的组合将极大提升开发效率。

下一步建议

本文基于 Qt 5.14.2CLion 2023.2 测试,环境配置可直接复用。如需升级 Qt 版本,请确保匹配 MSVC 编译器版本。


QT-开发环境搭建
https://blog.cikaros.top/doc/620cef5f.html
作者
Cikaros
发布于
2025年9月7日
许可协议