企业官网建设流程全解析

系列介绍

这是系列文章的第一篇，我将带你完成Qt开发环境的搭建，并创建你的第一个Qt程序。

🎯 本篇你将学到：

• Qt的下载和安装

• Qt Creator的基本使用

• 创建和运行第一个Qt项目

• 理解Qt项目的基本结构

• 配置编译套件

🏆 系列目标：从零到一，开发一款完整的桌面应用——PDF全能工具箱

📚 系列目录预告：

• 第2篇：Qt信号槽机制详解

• 第3篇：Qt布局管理器完全指南

• 第4篇：Qt样式表QSS美化教程

• 第5篇：Qt常用控件全解析

让我们开始吧！

一、什么是Qt？

Qt是一个跨平台的C++应用程序开发框架，由Qt Company维护。它被广泛应用于开发图形用户界面（GUI）应用程序，也支持开发控制台工具和服务器端应用。

使用Qt开发的知名软件：

• WPS Office（国产办公软件）

• VirtualBox（虚拟机软件）

• VLC多媒体播放器

• Autodesk Maya（3D建模软件）

• Telegram Desktop（即时通讯软件）

Qt的核心优势：

二、Qt的下载与安装

2.1 选择Qt版本

目前主流版本：

• Qt 5.15.x：最后支持Win7的LTS版本，成熟稳定

• Qt 6.x：最新版本，性能更好，但不再支持Win7

💡 推荐：新手从Qt 5.15开始，兼容性更好，教程资源更丰富。

2.2 下载方式

方式一：在线安装（推荐）

1. 访问Qt官方下载页面：Index of /official_releases/online_installers

2. 下载对应系统的在线安装器：

   • Windows：qt-unified-windows-x64-online.exe

   • Linux：qt-unified-linux-x64-online.run

   • macOS：qt-unified-mac-x64-online.dmg

3. 注册/登录Qt账号（免费注册）

方式二：离线安装（网络较差时选择）

访问：Index of /archive/qt

2.3 Windows安装步骤详解

第1步：双击运行安装器

第2步：登录Qt账号

如果没有账号，点击“Sign up”免费注册一个。

第3步：选择安装路径

推荐：D:\Qt\5.15.2 注意：路径不要包含中文和空格

第4步：选择组件（关键步骤）

展开Qt 5.15.2，勾选以下组件：

✅ MinGW 8.1.0 64-bit（Windows推荐使用） ✅ Qt Charts（图表控件，按需选择） ✅ Qt Virtual Keyboard（虚拟键盘，按需选择） ❌ Android相关组件（不需要开发安卓可以取消） ❌ iOS相关组件（不需要） ❌ Qt Source（源码，新手不需要）

展开Developer and Designer Tools：

✅ Qt Creator（IDE，必选） ✅ MinGW 8.1.0 64-bit（编译工具链，必选） ✅ CMake（构建工具，推荐勾选） ✅ Ninja（构建工具，可选）

第5步：接受协议，开始安装

安装大约需要10-20分钟，大小约2-3GB。

三、Qt Creator快速入门

3.1 界面布局

安装完成后，打开Qt Creator，界面分为以下几个区域：

┌─────────────────────────────────────────────────────────┐ │ 菜单栏 │ 文件 | 编辑 | 构建 | 调试 | 工具 | 帮助 │ ├──────────┬────────────────────────────────┬─────────────┤ │ │ │ │ │ 项目面板 │ │ 输出面板 │ │ (左侧) │ 代码编辑区 │ (底部) │ │ │ (中央) │ │ │ - 项目 │ │ - 编译输出 │ │ - 文件 │ │ - 应用输出 │ │ - 类视图 │ │ - 问题列表 │ │ │ │ │ ├──────────┴────────────────────────────────┴─────────────┤ │ 状态栏 │ └─────────────────────────────────────────────────────────┘

3.2 常用快捷键

四、创建第一个Qt项目

4.1 新建项目

步骤1：点击File→New File or Project（或按Ctrl+N）

步骤2：选择项目模板

Projects → Application → Qt Widgets Application

步骤3：设置项目信息

Name: HelloWorld Create in: D:\QtProjects

步骤4：选择构建套件

勾选MinGW 64-bit（确保绿色对勾表示配置正确）

步骤5：设置类信息

Class name: MainWindow Base class: QMainWindow

步骤6：点击完成，项目创建成功！

4.2 项目文件结构

创建完成后，你会看到以下文件：

HelloWorld/ ├── HelloWorld.pro # 项目配置文件（qmake） ├── main.cpp # 主函数入口 ├── mainwindow.h # 主窗口头文件 ├── mainwindow.cpp # 主窗口实现文件 └── mainwindow.ui # 界面设计文件（XML）

4.3 运行第一个程序

方法1：点击左下角的绿色三角形 ▶ 按钮

方法2：按Ctrl+R

如果一切顺利，你会看到一个空白的窗口弹出：

┌─────────────────────────────┐ │ ┌─┬─┬─┐│ │ HelloWorld │─│□│×││ │ ┌─────────────────────────┐│ │ │ ││ │ │ ││ │ │ 空白主窗口 ││ │ │ ││ │ │ ││ │ └─────────────────────────┘│ └─────────────────────────────┘

🎉恭喜！你已经成功运行了第一个Qt程序！

五、添加一个简单的按钮

让我们给窗口添加一个按钮，点击时弹出问候语。

5.1 使用代码添加按钮

修改mainwindow.h：

#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QPushButton> // 新增：按钮头文件 class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private slots: void onButtonClicked(); // 新增：按钮点击响应函数 private: QPushButton *m_button; // 新增：按钮指针 }; #endif

修改mainwindow.cpp：

#include "mainwindow.h" #include <QMessageBox> // 新增：消息对话框 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { // 创建按钮 m_button = new QPushButton("点击我", this); // 设置按钮位置和大小 m_button->setGeometry(100, 100, 200, 50); // 连接信号槽：按钮被点击时，调用onButtonClicked函数 connect(m_button, &QPushButton::clicked, this, &MainWindow::onButtonClicked); } MainWindow::~MainWindow() { } void MainWindow::onButtonClicked() { // 弹出问候消息 QMessageBox::information(this, "问候", "Hello, Qt World!"); }

5.2 运行效果

再次运行程序（Ctrl+R），你会看到一个带按钮的窗口：

┌─────────────────────────────┐ │ HelloWorld ┌─┬─┬─┐ │ │ ┌─────────────────────────┐│ │ │ ││ │ │ ┌──────────────┐ ││ │ │ │ 点击我 │ ││ │ │ └──────────────┘ ││ │ │ ││ │ └─────────────────────────┘│ └─────────────────────────────┘ 点击按钮后，弹出对话框： ┌─────────────────────────────┐ │ 问候 │ │ ┌─────────────────────────┐│ │ │ Hello, Qt World! ││ │ │ ││ │ │ [确定] ││ │ └─────────────────────────┘│ └─────────────────────────────┘

六、常见问题及解决方案

Q1：编译时报错 "No valid kits found"

原因：没有配置编译套件

解决：

Tools → Options → Kits → Add 选择已安装的MinGW编译器

Q2：中文显示乱码

解决：在代码开头添加

#include <QTextCodec> // 在main函数中 QTextCodec::setCodecForLocale(QTextCodec::codecForName("UTF-8"));

或者使用QStringLiteral宏：

m_button->setText(QStringLiteral("点击我"));

Q3：运行时提示缺少dll

原因：Qt动态库不在系统路径

解决：

• 开发阶段：通过Qt Creator运行，会自动设置环境

• 发布阶段：使用windeployqt工具打包

Q4：无法找到头文件

解决：检查.pro文件是否添加了对应模块

# 例如需要使用多媒体功能 QT += multimedia

七、本课小结

通过本篇学习，你完成了：

✅ Qt开发环境的安装和配置
✅ 熟悉了Qt Creator的基本操作
✅ 创建并运行了第一个Qt程序
✅ 添加了按钮和事件响应
✅ 了解了常见问题的解决方法

下一课预告：

第2篇「Qt信号槽机制详解」——我们将深入Qt最核心的特性，理解对象之间如何高效通信。这是Qt编程的灵魂所在，掌握它你就掌握了Qt的精髓！

课后练习：

1. 尝试修改按钮的文字和位置

2. 添加第二个按钮，实现不同的功能

3. 尝试修改窗口的标题和大小

系列进度

如果觉得有用，欢迎点赞、收藏、关注！

有问题欢迎评论区留言，我会及时回复。

下期见！👋