作者：赵文硕，沈传越

明德融创工作室（Minter Fusion Studio, MFS）  出品

本文介绍的所有步骤均经过测试复现。

---

如何使用Qt5在窗口中显示矩形（v0.1.3）（上）

步骤2 编辑源文件，实现所有功能

       1. 在项目左侧项目列表中，找到“Rectangle”→“Source”→“mainwindow.cpp”（如图9所示），双击打开mainwindow.cpp文件。

图9 mainwindow.cpp文件选项

       2. 复制以下完整代码，替换mainwindow.cpp中的原有内容。

//【代码】// #include "mainwindow.h"  // 包含头文件（确保类声明可见） #include <QPainter>  // 包含Qt绘图类头文件 // 构造函数实现：初始化主窗口 MainWindow::MainWindow(QWidget *parent)     : QMainWindow(parent)  // 调用基类构造函数（传递父窗口参数） {     setWindowTitle("我的矩形窗口");  // 设置窗口标题     resize(300, 250);  // 设置窗口初始大小（宽300，高250）     setStyleSheet("background-color:#f0f0f0;");  // 设置窗口背景色（浅灰色） } // 析构函数实现：当前无特殊资源需要清理 MainWindow::~MainWindow() { } // 绘制事件处理函数：重写基类的paintEvent，实现自定义绘制逻辑 void MainWindow::paintEvent(QPaintEvent *event) {     Q_UNUSED(event);  // 消除“未使用参数”警告     QPainter painter(this);  // 创建绘图对象（this表示在当前窗口上绘制）     painter.setBrush(Qt::red);  // 设置填充颜色为红色     painter.setPen(Qt::blue);  // 设置边框颜色为蓝色     painter.drawRect(50, 50, 200, 150);  // 绘制矩形（x=50, y=50, 宽200, 高150） }

       3. 在项目左侧项目列表中，找到“Rectangle”→“Headers”→“mainwindow.h”（如图9所示），双击打开mainwindow.h文件。

图10 mainwindow.h选项

       4. 复制以下完整代码，替换mainwindow.h中的原有内容。

//【代码】// #ifndef MAINWINDOW_H  // 防止头文件重复包含 #define MAINWINDOW_H #include <QMainWindow>  // 包含Qt主窗口基类头文件 class MainWindow : public QMainWindow  // 声明MainWindow类，继承自QMainWindow {     Q_OBJECT  // Qt元对象系统宏（必需，支持信号槽、属性等特性） public:     MainWindow(QWidget *parent = nullptr);  // 构造函数声明    ~MainWindow();     virtual ~MainWindow(); protected:     void paintEvent(QPaintEvent *event) override; // 绘制事件处理函数 }; #endif // MAINWINDOW_H  // 结束头文件包含保护

       5. 按下快捷键Ctrl+S（同时按下Ctrl、S键），保存源文件。

       6. 按下快捷键Ctrl+R（同时按下Ctrl、R键），运行程序。程序正常弹出窗口，窗口显示效果如图11所示：窗口名称为“我的矩形窗口”、背景为灰色，矩形边框为蓝色、矩形中间为红色，即为所有功能实现成功。

图11 程序运行结果

四、项目文件夹和代码说明

（一）Qt项目的结构

       在创建Qt项目的时候，会在用户给出的存放路径下，创建一个和用户给出的项目名称一样的文件夹，如本文档中给出的例子——Rectanle。

       从图10中，可以看到一个叫Rectangle.pro的文件，双点这个文件打开后，可以看到它的内容：

QT       += core gui greaterThan(QT_MAJOR_VERSION, 4): QT += widgets CONFIG += c++11 # You can make your code fail to compile if it uses deprecated APIs. # In order to do so, uncomment the following line. #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0 SOURCES += \     main.cpp \     mainwindow.cpp HEADERS += \     mainwindow.h FORMS += \     mainwindow.ui # Default rules for deployment. qnx: target.path = /tmp/$${TARGET}/bin else: unix:!android: target.path = /opt/$${TARGET}/bin !isEmpty(target.path): INSTALLS += target

       这个文件是整个项目的总体框架文件，记录项目相关的配置信息，比如都有哪些文件，编译部署的路径等。其中的SOURCES += \、HEADERS += \、FORMS += \，对应的就是图10所示的项目目录树中的“Sources”“Headers”“Forms”文件夹。

       Headers文件夹中，是项目编译所需要的C语言头文件。在本文的Rectangle项目中，包含头文件mainwindow.h。

       Sources文件夹中，是项目的C++语言文件。在本文的Rectangle项目中，包含main.cpp和mainwindow.cpp两个C++程序文件。

       Forms文件家中，是项目可视化界面的设计文件。在本文的Rectangle项目中，包含界面设计文件mainwindow.ui。

       如果打开硬盘上的Rectangle文件夹，还会发现另外有一个Rectangle.pro.user文件，这个文件是Qt Creator为你的特定项目和当前电脑环境生成的本地配置文件。它主要用来存储你在IDE中为该项目做的个性化设置，你可以把它理解成这个项目的“IDE 偏好备忘录”。  

（二）代码说明

       1. 修改窗口名称：

       setWindowTitle("我的矩形窗口");  // 设置窗口标题

       说明：该函数写在main函数中调用，括号内填写自定义窗口名称，直接替换即可修改。

       2. 修改窗口大小：

       resize(1024, 768);  // 设置窗口初始大小

       说明：该函数用于修改窗口的尺寸，括号里面的两个数字，第1个是指窗口的宽度，第2个是指窗口的高度，单位都是屏幕上的像素点。

       3. 修改窗口背景颜色：

       setStyleSheet("background-color:#f0f0f0;");  // 设置窗口背景色（浅灰色）

       说明：styleSheet（样式表）是Qt快速设置界面样式的方式，background-color后填写颜色值。

       #常用颜色值

       "#FF0000"  // 纯红色

       "#FFFF00"  // 纯黄色

       "#0000FF"  // 纯蓝色

       "#00FF00"  // 纯绿色

       "#000000"  // 纯黑色

       "#FFFFFF"  // 纯白色

       "#F0F0F0"  // 浅灰色

       4. 设置矩形边框的颜色：

       painter.setPen(Qt::blue);  // 设置边框颜色为蓝色

       说明：setPen是QPainter的边框设置函数，QPen的参数是边框颜色。

       #常用颜色常量

      Qt::red // 红色

      Qt::green // 绿色

      Qt::blue // 蓝色

      Qt::yellow // 黄色

      Qt::black // 黑色

      Qt::white // 白色

      Qt::gray // 灰色

       5. 设置矩形的填充色：

       painter.setBrush(Qt::red);  // 设置填充颜色为红色

       说明：setBrush是QPainter的填充设置函数，括号内填写填充颜色，若不设置该函数，矩形将只有边框、无填充色。

       注：常用颜色常量与边框的颜色相同。

      6. 矩形绘制核心代码：

       painter.drawRect(50, 50, 200, 150);  // 绘制矩形（x=50, y=50, 宽200, 高150）

       说明：drawRect的四个参数分别是“左上角x坐标、左上角y坐标、宽度、高度”，可根据需求调整数值。

---

【版本信息】

版       本：0.1.0

完成时间：2026-04-22

第一次发布时间：2026-04-22

最后更新时间：2026-04-22

---

【创作团队】

策       划：沈传越

文字创作：赵文硕，沈传越

统       稿：沈传越

技术支持：赵文硕

图片采集：赵文硕，沈传越

技术验证：沈传越

编       辑：沈传越

排       版：沈传越