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(独立帮助工具)。
相关推荐
wadesir31 分钟前
深入理解Rust静态生命周期(从零开始掌握‘static的奥秘)
开发语言·后端·rust
加蓓努力我先飞35 分钟前
a-第一部分-基础篇-前端面试题总结
前端
青莲84340 分钟前
Android Jetpack - 3 LiveData
android·前端
是有头发的程序猿41 分钟前
Python爬虫实战:面向对象编程在淘宝商品数据抓取中的应用
开发语言·爬虫·python
狗哥哥1 小时前
企业级 Vue 3 基础数据管理方案:从混乱到统一
前端
Query*1 小时前
杭州2024.08 Java开发岗面试题分类整理【附面试技巧】
java·开发语言·面试
前端涂涂1 小时前
哈希指针,什么是区块链,genesis blcok,most recent block,tamper-evident log,merkle tree,binar
前端
尽兴-1 小时前
问题记录:数据库字段 `CHAR(n)` 导致前端返回值带空格的排查与修复
前端·数据库·mysql·oracle·达梦·varchar·char