Qt 快速开始:安装配置并创建简单标签展示

文章目录

    • 一、Qt基础认知
      • [1. 什么是Qt?](#1. 什么是Qt?)
      • [2. 核心特性与优势](#2. 核心特性与优势)
      • [3. 版本与许可证说明](#3. 版本与许可证说明)
      • [4. 典型应用场景与成功案例](#4. 典型应用场景与成功案例)
    • 二、Qt开发环境搭建
      • [1. 开发工具选择](#1. 开发工具选择)
      • [2. Qt SDK下载](#2. Qt SDK下载)
      • [3. Qt SDK安装(Windows为例)](#3. Qt SDK安装(Windows为例))
      • [4. 安装验证](#4. 安装验证)
      • [5. 环境变量配置](#5. 环境变量配置)
      • 6.认识相关插件
    • [三、认识Qt Creator](#三、认识Qt Creator)
    • 四、创建第一个Qt项目
      • [1. 新建项目步骤](#1. 新建项目步骤)
    • 五、项目核心文件解析
      • [1. main.cpp(程序入口)](#1. main.cpp(程序入口))
      • [2. widget.h(头文件)](#2. widget.h(头文件))
      • [3. widget.cpp(源文件)](#3. widget.cpp(源文件))
      • [4. widget.ui(UI设计文件)](#4. widget.ui(UI设计文件))
      • [5. .pro 文件(项目配置文件)](#5. .pro 文件(项目配置文件))
      • [6. 自动生成文件](#6. 自动生成文件)
    • 六、构建方式
      • 创建标签
        • [1. 纯代码实现](#1. 纯代码实现)
        • [2. 可视化实现](#2. 可视化实现)
      • 创建单行文本组件
        • [1. 纯代码实现](#1. 纯代码实现)
        • [2. 可视化实现](#2. 可视化实现)
      • 创建按钮
        • [1. objectName](#1. objectName)
        • [2. objectName → 变量名](#2. objectName → 变量名)
        • 3.ui->控件名
        • [4. connect绑定](#4. connect绑定)
        • [1. 纯代码实现](#1. 纯代码实现)
        • [2. 可视化实现](#2. 可视化实现)
  • 七、Qt编程核心注意事项
      • [1. 命名规范](#1. 命名规范)
      • [2. 常用快捷键](#2. 常用快捷键)
      • [3. 帮助文档使用](#3. 帮助文档使用)

作为一款跨平台的C++图形用户界面应用程序框架,Qt凭借其强大的功能、简洁的接口和广泛的兼容性,成为桌面应用、移动应用和嵌入式系统开发的优选工具。本文将从Qt基础介绍、开发环境搭建、Qt Creator使用,到第一个Hello World项目实现,带你完整走完Qt入门流程,同时覆盖核心知识点与实操细节。

一、Qt基础认知

1. 什么是Qt?

Qt是一套跨平台的C++图形用户界面应用程序框架,提供了构建专业级GUI所需的全部功能。它具有完全面向对象、易于扩展的特性,支持组件化开发------开发者既可通过拖拽快速搭建界面,也能通过C++进行高级定制开发。

图形用户界面(GUI)是计算机与用户的可视化交互接口,Qt支持开发Android、iOS、Windows、Linux等多平台的GUI应用,兼容各类设备的界面设计需求。

2. 核心特性与优势

  • 跨平台兼容:支持Windows(XP/7/8/10等)、Unix/X11(Linux、Solaris等)、Mac OS X、嵌入式Linux、Android、iOS等几乎所有主流平台;
  • 上手简单:接口直观,学习曲线平缓,掌握后对其他框架学习有参考意义;
  • 内存管理友好:通过对象树机制简化内存回收,减少内存泄漏风险;
  • 开发效率高:可视化设计工具+丰富的库支持,快速构建复杂应用;
  • 社区活跃:市场份额稳步上升,问题解决方案丰富;
  • 嵌入式支持:深度适配嵌入式设备,是机顶盒、车载系统、安防设备等领域的常用框架。

3. 版本与许可证说明

  • 版本选择:最新版本为Qt 6,但Qt 5与Qt 6核心功能差异不大,且企业级项目中Qt 5仍广泛应用,本文及实操部分均以Qt 5.14为例;
  • 许可证类型
    • 商业许可:用于商业目的开发,需购买授权,提供更多功能与服务;
    • 开源许可:非商业目的免费使用,需遵守开源协议(如包含许可声明)。

4. 典型应用场景与成功案例

  • 应用场景:桌面应用(文件管理器、媒体播放器)、移动应用(社交APP、游戏)、嵌入式系统(车载娱乐、医疗设备);
  • 成功案例:Linux桌面环境KDE、WPS Office、Skype网络电话、Google Earth、VLC多媒体播放器、VirtualBox虚拟机等。

二、Qt开发环境搭建

1. 开发工具选择

Qt支持多种开发工具,核心推荐如下:

工具 特点与适用场景
Qt Creator 官方轻量级跨平台IDE,专为Qt开发设计,集成可视化界面设计器、代码编辑器、调试器、版本控制工具,支持C++/QML/JavaScript,是本文实操首选工具
Visual Studio 微软开发的全能IDE,支持多语言(C++/C#等)与跨平台开发,可通过插件集成Qt框架
Eclipse 开源跨平台IDE,默认支持Java,可通过插件扩展为C++/Qt开发工具,灵活性强

2. Qt SDK下载

(1)下载地址
(2)下载步骤
  1. 进入下载地址,选择Qt 5系列(本文选5.14版本);
  2. 展开5.14目录,选择具体版本(如5.14.2);
  3. 根据操作系统选择安装包:
    • Windows:qt-opensource-windows-x86-5.14.2.exe(2.3G);
    • Mac:qt-opensource-mac-x64-5.14.2.dmg(2.6G);
    • Linux:qt-opensource-linux-x64-5.14.2.run(1.2G)。

3. Qt SDK安装(Windows为例)

关键提醒:安装全程需避免中文路径,否则会导致后续无法使用!

  1. 双击安装包前先断网(避免要求注册Qt账号,断网后可跳过登录);

  2. 打开安装程序,进入欢迎界面,点击"下一步";

  3. 选择安装路径(如D:\Development_Software\Qt),路径中无中文,勾选"关联常见文件类型",点击"下一步";

  4. 选择安装组件:

    • 磁盘空间充足建议"全选";
    • 空间有限可仅选核心组件:Qt 5.14.2 -> MinGW 7.3.0(32/64-bit)、Qt Creator 4.11.1、CDB Debugger Support;

  5. 同意所有许可协议,点击"下一步";

  6. 选择开始菜单快捷方式目录(默认即可),点击"下一步";

  7. 确认安装信息,点击"安装",等待10-30分钟(视配置而定);

  8. 安装完成后,勾选"Launch Qt Creator",点击"完成"。

4. 安装验证

  1. 打开Qt Creator,进入"欢迎模式"->"示例";
  2. 任意选择一个示例(如Calendar Widget),点击打开;
  3. 关闭弹出的帮助窗口,点击左下角"构建并运行"(或按Ctrl+R);
  4. 若能成功编译并显示示例窗口(如日历界面),说明安装无误。

5. 环境变量配置

为了在命令行或其他工具中直接调用Qt相关命令,需配置环境变量:

  1. 找到Qt安装路径下的bin目录(如D:\Development_Software\Qt\5.14.2\mingw73_64\bin),复制该路径;

  2. 右键"此电脑"->"属性"->"高级系统设置"->"环境变量";

  3. 在"系统变量"中找到"Path",点击"编辑"->"新建",粘贴bin目录路径;

  4. 依次点击"确定"保存配置(关闭所有窗口时务必点击确定,否则配置无效)。

配置原因:环境变量告知系统可执行程序的查找路径,配置后无需输入完整路径即可调用Qt编译器、调试器等工具。

6.认识相关插件

常用功能对应如下:

  • Qt Creator 4.11.1(Community):是Qt开发的核心IDE,日常高频使用------能新建/管理项目、编写代码、构建/运行/调试程序,还能直接切换到设计/调试模式,是开发的"主阵地"。
  • Qt Designer 5.14.2:可视化界面设计工具,做GUI界面时常用------拖放按钮、标签等组件,直接设置样式/位置,不用手写UI代码,也能在Qt Creator里打开.ui文件直接调用它。
  • Qt Assistant 5.14.2 :Qt官方帮助工具,写代码时必备------查类的API、用法示例、框架说明,比如不确定QPushButton的函数怎么用,搜一下就能看到详细文档(也能在Qt Creator里按F1直接跳转)。
  • Qt Linguist 5.14.2:多语言翻译工具,需做国际化项目时用------把界面文字改成不同语言(比如中/英文切换),普通项目用得较少。
  • Qt 5.14.2(MinGW 64-bit):对应编译器的命令行环境,偶尔用------比如需要手动执行qmake编译、调用命令行工具时会用到,日常用Qt Creator的构建功能基本能覆盖。

三、认识Qt Creator

1. 界面概览

Qt Creator启动后默认进入欢迎模式,核心界面组件包括:

  • 菜单栏:8个核心菜单(文件、编辑、构建、调试等),涵盖所有操作功能;
  • 模式选择:欢迎、编辑、设计、调试、项目、帮助6种模式,对应不同开发阶段;
  • 构建套件选择器:包含目标选择器(选择Qt版本、编译类型Debug/Release)、运行按钮、调试按钮、构建按钮;
  • 边栏:项目文件管理、打开文档列表、类视图等,可通过Alt+0显示/隐藏;
  • 代码编辑区:支持语法高亮、自动补全、代码折叠,行首区可设置断点和书签;
  • 输出窗格:显示编译错误、运行日志、搜索结果等,快捷键Alt+1~7切换不同面板。

2. 核心模式说明

模式 功能
欢迎模式 快速新建项目、打开示例、查看教程、访问Qt官方资源
编辑模式 编写/修改代码、管理项目文件,支持代码重构、智能提示
设计模式 可视化设计GUI界面,拖拽组件、设置属性、关联信号与槽
调试模式 单步调试、设置断点、查看变量/堆栈信息
项目模式 配置构建套件、运行参数、代码风格、依赖关系
帮助模式 查阅Qt类库文档、API说明,支持索引和搜索

3.配置Qt字体颜色和背景

这里博主推荐一篇博客,具体步骤请移步。

四、创建第一个Qt项目

1. 新建项目步骤

  1. 打开Qt Creator,点击"文件"->"新建文件或项目"(快捷键Ctrl+N);

  2. 选择项目模板:"Application"->"Qt Widgets Application"(普通窗体程序),点击"选择";

  3. 项目命名与路径:名称输入"QtHelloWorld",路径选择无中文目录(如C:\QtCode\QtHelloWorld),点击"下一步";

  4. 选择构建系统:默认"qmake"(Qt最常用构建工具),点击"下一步";

  5. 类信息设置:

    • 类名:默认"Widget";
    • 基类:选择"QWidget"(最基础的窗体类);
    • 勾选"Generate form"(生成UI设计文件),点击"下一步";

Qt Creator创建项目时会自动生成一个类(MainWindow类),这里选的"基类",就是这个自动生成类的"父类"------父类的功能会直接继承给你的类,所以基类决定了这个窗口的基础形态。

  • QMainWindow

    是"完整的应用程序主窗口",自带菜单栏、工具栏、状态栏的结构(比如WPS、浏览器的主界面),适合作为复杂应用的"主窗口"使用。

  • QWidget

    是所有界面组件的"基础父类"------它可以是一个空白窗口(无菜单/工具条),也可以是窗口上的单个控件(比如按钮、输入框、下拉框这些都是QWidget的子类),适合做简单小窗口或自定义控件。

  • QDialog

    是"对话框类",用来做弹出式交互窗口(比如"确认删除?"的提示框、软件的设置窗口),特点是临时弹出、处理完就关闭,不能单独作为应用的主窗口(通常依附主窗口存在)。

  • form file (对应的是.ui格式的文件)是 Qt 里图形化创建界面的核心工具,不再需要纯 C++ 代码写界面(比如手动写代码创建按钮、设置位置),而是用 Qt Designer(或 Qt Creator 的设计模式)打开这个.ui文件,就能拖放按钮、输入框等组件,还能直接设置组件的样式、位置。

  1. 翻译文件:暂时不考虑国际化,选择"",点击"下一步";
  2. 选择Qt套件:默认"Desktop Qt 5.14.2 MinGW 64-bit",点击"下一步";
  3. 项目管理:默认不添加版本控制,点击"完成"。

项目创建后,自动生成5个核心文件:.pro(项目配置文件)、widget.h(头文件)、widget.cpp(源文件)、main.cpp(程序入口)、widget.ui(UI设计文件)。

五、项目核心文件解析

1. main.cpp(程序入口)

Qt程序的入口文件,核心逻辑如下:

cpp 复制代码
#include "widget.h"
#include <QApplication> // 应用程序类头文件

int main(int argc, char *argv[])
{
    QApplication a(argc, argv); // 创建应用程序对象(有且仅有一个)
    							// Qt图形化程序,一定要有QApplication对象
    Widget w; // 创建项目选择的类,父类为QWidget
    w.show(); // 显示窗口(默认隐藏)
    return a.exec(); // 进入事件循环,等待用户交互
}

2. widget.h(头文件)

定义窗口类,支持信号与槽机制:

cpp 复制代码
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget> //QWidget头文件,Qt中头文件和类名是一致的,方便包含

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; } // UI设计界面的命名空间
QT_END_NAMESPACE

class Widget : public QWidget //Widght继承自QWidget
{
    Q_OBJECT // 启用信号与槽机制的宏

public:
    Widget(QWidget *parent = nullptr); //对象树机制,新增节点需要挂到树上
    ~Widget();

private:
    Ui::Widget *ui; // 指向UI设计界面的指针,用于访问可视化组件(与form file相关)
};
#endif // WIDGET_H

3. widget.cpp(源文件)

窗口类的实现文件,所有功能逻辑均在此编写:

cpp 复制代码
#include "widget.h"
#include "ui_widget.h"

// 构造函数:初始化窗口
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this); // 将formfile与Widget关联
}

// 析构函数:释放资源
Widget::~Widget()
{
    delete ui;
}

4. widget.ui(UI设计文件)

XML格式的界面定义文件,记录组件位置、属性、布局等信息,由Qt Creator自动解析,无需手动修改。

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Widget</class>
 <widget class="QWidget" name="Widget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Widget</string>
  </property>
 </widget>
 <resources/>
 <connections/>
</ui>

5. .pro 文件(项目配置文件)

cmake会生成makefile文件,qmake 也会生成类似的 makefile 配置文件,核心内容如下:

cpp 复制代码
QT += core gui // 引入核心模块和GUI模块
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets // Qt5及以上需额外引入widgets模块
CONFIG += c++11// 以c++11编译
TEMPLATE = app // 模板类型为应用程序
SOURCES += main.cpp \ // 源文件列表
           widget.cpp
HEADERS += widget.h // 头文件列表
FORMS += widget.ui // UI设计文件列表

6. 自动生成文件

在代码目录下会生成构建的临时文件:


build-faststart-Desktop_Qt_5_14_2_MinGW_64_bit-Debug 其中包含了Makefile以及自动生成的ui_widget.h头文件:

六、构建方式

创建标签

1. 纯代码实现
  1. 打开 widget.cpp 文件,添加如下代码:
cpp 复制代码
#include "widget.h"
#include "ui_widget.h"//formfile头文件
#include "QLabel"//label头文件

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);//将formfile生成的文件与Widget关联
    
    QLabel* label=new QLabel(this);//推荐在堆上创建,创建的label父节点指针为this
    label->setText(QString("HelloWorld"));
    
}

Widget::~Widget()
{
    delete ui;
}
  1. 点击左下角 "运行"(或 Ctrl+R),编译运行后将显示带有 "Hello Qt!" 按钮的窗口。
  2. tips:Qt自己设计了一套容器:QString、Qmap、QVector、QList,在构造Qt组件时可以使用std::string也可以使用QString!
2. 可视化实现
  1. 双击项目中的 widget.ui 文件,进入设计模式;
  2. 在左侧 "组件选择窗口" 中,找到 "Display Widgets"->"Label"(标签),拖拽到中间的 UI 设计窗口;
  3. 双击标签,修改文本为 "HelloWorld";
  4. 点击 "运行"(Ctrl+R),即可看到设置好的标签界面。

改变的是xml文件:

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Widget</class>
 <widget class="QWidget" name="Widget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Widget</string>
  </property>
  <widget class="QLabel" name="label">
   <property name="geometry">
    <rect>
     <x>350</x>
     <y>280</y>
     <width>121</width>
     <height>91</height>
    </rect>
   </property>
   <property name="text">
    <string>HelloWorld</string>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

创建单行文本组件

1. 纯代码实现
  1. 打开 widget.cpp 文件,添加如下代码:
cpp 复制代码
#include "widget.h"
#include "ui_widget.h"
#include "QLineEdit"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QLineEdit* edit=new QLineEdit(this);
    edit->setText("HelloWorld!");
}

Widget::~Widget()
{
    delete ui;
}
  1. 点击左下角 "运行"(或 Ctrl+R),编译运行后将显示带有 "Hello Qt!" 按钮的窗口。
2. 可视化实现
  1. 双击项目中的 widget.ui 文件,进入设计模式;
  2. 在左侧 "组件选择窗口" 中,找到 "Display Widgets"->"LineEdit"(标签),拖拽到中间的 UI 设计窗口;
  3. 双击标签,修改文本为 "HelloWorld";
  4. 点击 "运行"(Ctrl+R),即可看到设置好的标签界面。

创建按钮

1. objectName

你在Qt Designer里拖一个按钮(或其他控件)时,每个控件会自动分配一个唯一的"名字标签" (就是objectName属性),比如图里的按钮名字是pushButton------这个名字不能和界面里其他控件重复(相当于给每个控件发个身份证号)。

2. objectName → 变量名

Qt有个工具(qmake)会把你在Designer里画的界面(.ui文件),自动转换成C++代码。

这个按钮在生成的代码里,会变成一个变量 ,变量名就等于刚才的objectName------比如按钮的objectNamepushButton,代码里对应的变量就是ui->pushButton

3.ui->控件名

通过ui->控件的objectName,就能在代码里操作这个控件:

比如想改按钮文字,就写ui->pushButton->setText("点我");;想隐藏按钮,就写ui->pushButton->hide();

4. connect绑定

图里的connect(...)给按钮绑定"点击后的操作"

  • ui->pushButton:指定"哪个控件"(就是刚才那个按钮);
  • &QPushButton::clicked:指定"控件发生了什么动作"(按钮被点击);
  • this:指定"谁来处理这个动作"(当前窗口);
  • &Widget::handleClick:指定"处理动作的函数"(点击后执行Widget类里的handleClick函数)。
1. 纯代码实现
cpp 复制代码
class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    void handlerclick();
    ~Widget();

    QPushButton *mybutton;
private:
    Ui::Widget *ui;
};

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    mybutton = new QPushButton(this);
    connect(mybutton,&QPushButton::clicked,this,&Widget::handlerclick);
}

void Widget::handlerclick()
{
    if(mybutton->text()=="Helloworld")
    {
        mybutton->setText("helloqt");
    }
    else
    {
        mybutton->setText("hellolinux");
    }
}

Widget::~Widget()
{
    delete ui;
}
2. 可视化实现
  1. 双击项目中的 widget.ui 文件,进入设计模式;
  2. 在左侧 "组件选择窗口" 中,找到 "Display Widgets"->"Push Button"(标签),拖拽到中间的 UI 设计窗口;
  3. 双击标签,修改文本为 "HelloWorld";
  4. 点击 "运行"(Ctrl+R),即可看到设置好的标签界面。

在widget.cpp中加入对应处理函数:

cpp 复制代码
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    connect(ui->pushButton,&QPushButton::clicked,this,&Widget::handlerclick);
}

void Widget::handlerclick()
{
    if(ui->pushButton->text()=="Helloworld")
    {
        ui->pushButton->setText("helloqt");
    }
    else
    {
        ui->pushButton->setText("hellolinux");
    }
}

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

七、Qt编程核心注意事项

1. 命名规范

  • 类名:首字母大写,单词间首字母大写(如QPushButton、MyWidget);
  • 函数名/变量名:首字母小写,单词间首字母大写(如setText、move);
  • 遵循驼峰命名法,与Qt官方风格保持一致。

2. 常用快捷键

  • 注释/取消注释:Ctrl+/
  • 运行程序:Ctrl+R
  • 编译项目:Ctrl+B
  • 字体缩放:Ctrl+鼠标滑轮
  • 查找替换:Ctrl+F
  • 整行移动:Ctrl+Shift+上/下箭头
  • 帮助文档:光标定位到类/函数名,按F1
  • 头文件与源文件切换:F4
  • 自动对齐代码:Ctrl+I

3. 帮助文档使用

Qt文档是最权威的学习资源,使用方式:

  1. 光标定位到类名(如QPushButton),按F1直接跳转;
  2. 点击Qt Creator左侧"帮助"模式,通过索引或搜索查询;
  3. 直接打开Qt安装目录下的bin\assistant.exe(独立帮助工具)。
相关推荐
代码匠心8 小时前
AI 自动编程:一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong9 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode9 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户54330814419410 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo10 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
恋猫de小郭10 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木10 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮10 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati10 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉10 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain