Windows 基于Visual Studio 开发Qt 6 注意事项

灰太狼 2023-10-16 10:54 12阅读 0赞

前提条件：

1、Visual Studio 2022 社区版(免费版)

2、Qt-6.5.1版本

## Qt Vistual Studio Tools下载 ##

先打开Visual Studio 2022 社区版 ：

![99cda3aec0064c1584ce05acb3064b30.png][]

点击扩展-》管理拓展按钮后，在搜索框中输入Qt，点击这里第一个扩展安装。

![e4cc28fcb7184cfdae66bca0e5b4a838.png][]

Qt Visual Studio Tools 拓展插件安装成功后，在拓展菜单项多出一个菜单选项"Qt VS Tools"

![772b7949eb2b4666adaac8353ed3dd42.png][]

## Vistual Studio 2022 社区版配置Qt 6 ##

进入Vistual Studio 2022 点击扩展->Qt VS Tool->Qt Versions

![cdf36de86a8143019278c81ae3a36424.png][]

进入Qt Versions后， 点击Qt -> Versions。

![432a3558ce1c4ec6ae2a1809e98965ad.png][]

配置Qt 6 地址:D:\Qt\6.5.1\msvc2019_64\bin\

## Vistual Studio 2022 创建Qt 6 项目 ##

创建一个Qt项目。

![d3ab4fa55c3545e2b7f57f2107662238.png][]

![445d6bf03c304d05addccc3d8e28a555.png][]

点击下一步:

![20853b700e154414bbeaee7f5b3c5e42.png][]

![e0b4f59b99654a1aa7edce53a7cffc78.png][]

点击下一步:

![d00424a74dc24bf499d56741becaaef2.png][]

Qt 应用程序入口: main.cpp

Qt 应用UI设计文件:QtWidgetsApplication\_One.ui

Qt 应用组件对应头文件:QtWidgetsApplication\_One.h

Qt 应用组件对应Class 文件:QtWidgetsApplication\_One.cpp

Qt 应用继承基础类:QMainWindows

Qt 应用资源文件:QtWidgetsApplication\_One.qrc

点击Finsh 按钮:

![35d29916d03c4ef4b197c82c88a81117.png][]

运行效果展示:

![f44fe235e1f940309fc69138f911273e.png][]

## Vistual Studio 2022 无法正常打开Qt 项目 中的\*.UI文件 ##

当我们双击\*.UI文件，会出现下面这样的弹窗。

![f29747812c3d40d3a69590ca1e5de183.png][]

如何解决此类问题？

请按照如下步骤进行：

![69ca440fa86c44baa2e6a5c48fd5c012.png][]

![ba5d463d34f9407384f65cdf5ca83f08.png][]

> **右键.ui文件 ===> 打开方式 ===> 添加 ===> 找到对应文件下的.exe文件 ===> 随便取名**

UI 效果展示:

![486a74aa280548f2baf2eba4fca6877a.png][]

## Vistual Studio 2022 社区版 Qt 项目 涉及简单登入页面 ##

在QtWidgetsApplication\_One.ui 文件中添加如下组件清单：

3 个Label 标签

2 个Line Edit 输入文本框

2 个Push Button 按钮

1 个CheckBox Button 按钮

QtWidgetsApplication\_One.ui 在设计器中的展示：

![bfc7a09ce35d4cc98da7f526eb827afe.png][]

点击Ctral + S 保存快捷键，再次运行QtWidgetsApplication\_One 项目的main.cpp 方法。

![dd766d8507734a9488380639f17d1e28.png][]

## Vistual Studio 2022 社区版 Qt 项目 涉及多个UI 页面 ##

在实际Qt 项目开发中，需要使用多个UI 页面以及对应的头文件和Class 文件。

Qt 项目-》Form Files 右击![d265fc36d35b418bad8120d4feddc11e.png][]

![75fc858d33c649f4970f8557d896ea9f.png][]

我在这里新增addFrom.ui 文件，且原型设计如下图所示：

![446f407205d0408cacbbbabe74ad19e7.png][]

如何解决基于\*.UI 文件生成头文件和Class文件？

请按照如下步骤进行：

第一步：在Qt 6 项目中选择需要进行编译的UI 文件并点击编译，我这里选择的是自定义addFrom.ui 文件。

![24ecc6b764a340ef977f53aaa8477f2d.png][]

编译的结果：将在Qt 项目 所占目录中 ->X64-》Debug ->uic 文件夹目录中生成一个名为:ui\_addFrom.h 的头文件。

查看文件内容(ui\_addFrom.h)

/********************************************************************************
    ** Form generated from reading UI file 'addFrom.ui'
    **
    ** Created by: Qt User Interface Compiler version 6.5.1
    **
    ** WARNING! All changes made in this file will be lost when recompiling UI file!
    ********************************************************************************/
    
    #ifndef UI_ADDFROM_H
    #define UI_ADDFROM_H
    
    #include <QtCore/QVariant>
    #include <QtWidgets/QApplication>
    #include <QtWidgets/QLabel>
    #include <QtWidgets/QLineEdit>
    #include <QtWidgets/QPushButton>
    #include <QtWidgets/QRadioButton>
    #include <QtWidgets/QTextEdit>
    #include <QtWidgets/QWidget>
    
    QT_BEGIN_NAMESPACE
    
    class Ui_Form
    {
    public:
        QLabel *label;
        QLabel *label_2;
        QLineEdit *lineEdit;
        QLabel *label_3;
        QLineEdit *lineEdit_2;
        QLabel *label_4;
        QLineEdit *lineEdit_3;
        QLabel *label_5;
        QRadioButton *radioButton;
        QRadioButton *radioButton_2;
        QLabel *label_6;
        QTextEdit *textEdit;
        QPushButton *pushButton;
    
        void setupUi(QWidget *Form)
        {
            if (Form->objectName().isEmpty())
                Form->setObjectName("Form");
            Form->resize(650, 455);
            label = new QLabel(Form);
            label->setObjectName("label");
            label->setGeometry(QRect(210, 50, 54, 16));
            label_2 = new QLabel(Form);
            label_2->setObjectName("label_2");
            label_2->setGeometry(QRect(140, 90, 54, 16));
            lineEdit = new QLineEdit(Form);
            lineEdit->setObjectName("lineEdit");
            lineEdit->setGeometry(QRect(210, 90, 113, 20));
            label_3 = new QLabel(Form);
            label_3->setObjectName("label_3");
            label_3->setGeometry(QRect(140, 130, 54, 16));
            lineEdit_2 = new QLineEdit(Form);
            lineEdit_2->setObjectName("lineEdit_2");
            lineEdit_2->setGeometry(QRect(210, 130, 113, 20));
            label_4 = new QLabel(Form);
            label_4->setObjectName("label_4");
            label_4->setGeometry(QRect(140, 170, 54, 16));
            lineEdit_3 = new QLineEdit(Form);
            lineEdit_3->setObjectName("lineEdit_3");
            lineEdit_3->setGeometry(QRect(210, 170, 113, 20));
            label_5 = new QLabel(Form);
            label_5->setObjectName("label_5");
            label_5->setGeometry(QRect(140, 210, 54, 16));
            radioButton = new QRadioButton(Form);
            radioButton->setObjectName("radioButton");
            radioButton->setGeometry(QRect(210, 210, 95, 20));
            radioButton_2 = new QRadioButton(Form);
            radioButton_2->setObjectName("radioButton_2");
            radioButton_2->setGeometry(QRect(290, 210, 95, 20));
            label_6 = new QLabel(Form);
            label_6->setObjectName("label_6");
            label_6->setGeometry(QRect(140, 250, 54, 16));
            textEdit = new QTextEdit(Form);
            textEdit->setObjectName("textEdit");
            textEdit->setGeometry(QRect(140, 270, 191, 81));
            pushButton = new QPushButton(Form);
            pushButton->setObjectName("pushButton");
            pushButton->setGeometry(QRect(210, 380, 75, 24));
    
            retranslateUi(Form);
    
            QMetaObject::connectSlotsByName(Form);
        } // setupUi
    
        void retranslateUi(QWidget *Form)
        {
            Form->setWindowTitle(QCoreApplication::translate("Form", "Form", nullptr));
            label->setText(QCoreApplication::translate("Form", "\347\224\250\346\210\267\346\226\260\345\242\236", nullptr));
            label_2->setText(QCoreApplication::translate("Form", "\345\247\223\345\220\215", nullptr));
            label_3->setText(QCoreApplication::translate("Form", "\345\271\264\351\276\204", nullptr));
            label_4->setText(QCoreApplication::translate("Form", "\345\256\266\345\272\255\344\275\217\345\235\200", nullptr));
            label_5->setText(QCoreApplication::translate("Form", "\346\200\247\345\210\253:", nullptr));
            radioButton->setText(QCoreApplication::translate("Form", "\347\224\267", nullptr));
            radioButton_2->setText(QCoreApplication::translate("Form", "\345\245\263", nullptr));
            label_6->setText(QCoreApplication::translate("Form", "\344\270\252\344\272\272\347\256\200\344\273\213\357\274\232", nullptr));
            pushButton->setText(QCoreApplication::translate("Form", "\344\277\235\345\255\230", nullptr));
        } // retranslateUi
    
    };
    
    namespace Ui {
        class Form: public Ui_Form {};
    } // namespace Ui
    
    QT_END_NAMESPACE
    
    #endif // UI_ADDFROM_H

> 重点:
> 
> 1、声明一个命名空间:namespae Ui。
> 
> 2、定义自定义addFrom.ui 对应的实现类：Ui\_From。
> 
> 3、定义类Ui\_From 在命名空间Ui 访问别名 From。

第二步：在Qt 项目->Header Files 添加addFrom.ui 对应的AddFrom.h 头文件。

主要用途：引用"ui\_addFrom.h" 头文件中对addFrom.ui 实现类：Ui::Form ui

addFrom.h 头文件 源码:

#pragma once
    
    #include <QtWidgets/QMainWindow>
    #include "ui_addFrom.h"
    
    class AddFrom : public QMainWindow
    {
        Q_OBJECT
    
    public:
        AddFrom(QWidget* parent = nullptr);
        ~AddFrom();
    
    private:
        Ui::Form ui;
    };

第三步：在Qt 项目->Source Files 添加addFrom.h 对应的实现类addFrom.cpp。

#include "addFrom.h"
    
    AddFrom::AddFrom(QWidget* parent)
        : QMainWindow(parent)
    {
        ui.setupUi(this);
    }
    
    AddFrom::~AddFrom()
    {}

项目整体结构：

![bb64fdcbf72f4db6881cf21ff01ab476.png][]

第四步：在程序入库main.cpp 文件替换为addFrom.h 文件

#include "QtWidgetsApplication_One.h"
    #include "addFrom.h"
    #include <QtWidgets/QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        AddFrom w;
        w.show();
        return a.exec();
    }

效果截图 ：

![c083ef2efda34de49c1f2b379170fc28.png][]

## Vistual Studio 2022 社区版 Qt 项目 涉及多个UI 页面跳转 ##

在上一个案列中，我们涉及了登入页面和注册页面，如何把两个页面串联, 我们将通过槽和函数实现 ，通过登入页面的登入按钮跳转至注册页面。

第一步：在QtWidgetsApplication\_One.h 头文件中定义槽函数：

> // 定义槽函数  
> public slots:  
> void gotoFrom();

QtWidgetsApplication\_One.h 源文件：

#pragma once
    
    #include <QtWidgets/QMainWindow>
    #include "ui_QtWidgetsApplication_One.h"
    
    class QtWidgetsApplication_One : public QMainWindow
    {
        Q_OBJECT
    
    public:
        QtWidgetsApplication_One(QWidget *parent = nullptr);
        ~QtWidgetsApplication_One();
    
     // 定义槽函数
    public slots:
        void gotoFrom();
    
    private:
        Ui::QtWidgetsApplication_OneClass ui;
    };

第二步：在QtWidgetsApplication\_One.h 头文件对应QtWidgetsApplication\_One.cpp 文件，实现PushButton 信号事件与槽函数绑定。

核心代码片段:
    在初始化构造函数中完成PushButton 信号事件与自定义槽函数绑定。
    QtWidgetsApplication_One::QtWidgetsApplication_One(QWidget *parent)
        : QMainWindow(parent)
    {
        ui.setupUi(this);
        //连接pushbutton的clicked()信号到自定义的gotoFrom()槽
        connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(gotoFrom()));
    }
    
    实现在QtWidgetsApplication_One.h 自定义槽函数gotoFrom()
    void QtWidgetsApplication_One::gotoFrom() {
        qDebug() << "pushButton 按钮点击事件触发 ";
    }
    
    //  自定义槽函数gotoFrom():仅仅涉及控制台字符串输出，暂时不涉及页面跳转。

QtWidgetsApplication\_One.cpp 控制台输出字符串源码。

#include "QtWidgetsApplication_One.h"
    #include <QDebug>
    
    QtWidgetsApplication_One::QtWidgetsApplication_One(QWidget *parent)
        : QMainWindow(parent)
    {
        ui.setupUi(this);
        //连接pushbutton的clicked()信号到自定义的gotoFrom()槽
        connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(gotoFrom()));
    }
    
    QtWidgetsApplication_One::~QtWidgetsApplication_One()
    {}
    
    void QtWidgetsApplication_One::gotoFrom() {
        qDebug() << "pushButton 按钮点击事件触发 ";
    }

效果展示:

![273d7511c1c44f9aa6089b3ff3afedf2.png][] 美中不足：输出的汉子显示乱码。

第三步：在QtWidgetsApplication\_One.cpp 文件中，添加对跳转页面头文件的依赖（"addFrom.h"）。并在槽函数gotoFrom()中实现页面跳转。

核心代码片段:
    1、添加跳转页面的头文件
    #include "addFrom.h"
    2、在自定义槽函数实现页面跳转
    void QtWidgetsApplication_One::gotoFrom() {
        qDebug() << "pushButton 按钮点击事件触发 ";
        // 当前页面关闭
        this->close();
        // 跳转页面显示
        AddFrom* from = new AddFrom();
        from->show();
    }

QtWidgetsApplication\_One.cpp 页面跳转。

#include "QtWidgetsApplication_One.h"
    #include "addFrom.h"
    #include <QDebug>
    
    QtWidgetsApplication_One::QtWidgetsApplication_One(QWidget *parent)
        : QMainWindow(parent)
    {
        ui.setupUi(this);
        //连接pushbutton的clicked()信号到自定义的gotoFrom()槽
        connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(gotoFrom()));
    }
    
    QtWidgetsApplication_One::~QtWidgetsApplication_One()
    {}
    
    void QtWidgetsApplication_One::gotoFrom() {
        qDebug() << "pushButton 按钮点击事件触发 ";
        // 当前页面关闭
        this->close();
        // 跳转页面显示
        AddFrom* from = new AddFrom();
        from->show();
    }

效果展示:

![ec378771488c46a494c5b443f2b396a5.png][]

![627f1180a6eb4e259a894de2c3366726.png][]

至此，Visual Studio 2022 + Qt 6 在Windows 开发环境注意细节就 讲这么多了。

[99cda3aec0064c1584ce05acb3064b30.png]: https://img-blog.csdnimg.cn/99cda3aec0064c1584ce05acb3064b30.png
[e4cc28fcb7184cfdae66bca0e5b4a838.png]: https://img-blog.csdnimg.cn/e4cc28fcb7184cfdae66bca0e5b4a838.png
[772b7949eb2b4666adaac8353ed3dd42.png]: https://img-blog.csdnimg.cn/772b7949eb2b4666adaac8353ed3dd42.png
[cdf36de86a8143019278c81ae3a36424.png]: https://img-blog.csdnimg.cn/cdf36de86a8143019278c81ae3a36424.png
[432a3558ce1c4ec6ae2a1809e98965ad.png]: https://img-blog.csdnimg.cn/432a3558ce1c4ec6ae2a1809e98965ad.png
[d3ab4fa55c3545e2b7f57f2107662238.png]: https://img-blog.csdnimg.cn/d3ab4fa55c3545e2b7f57f2107662238.png
[445d6bf03c304d05addccc3d8e28a555.png]: https://img-blog.csdnimg.cn/445d6bf03c304d05addccc3d8e28a555.png
[20853b700e154414bbeaee7f5b3c5e42.png]: https://img-blog.csdnimg.cn/20853b700e154414bbeaee7f5b3c5e42.png
[e0b4f59b99654a1aa7edce53a7cffc78.png]: https://img-blog.csdnimg.cn/e0b4f59b99654a1aa7edce53a7cffc78.png
[d00424a74dc24bf499d56741becaaef2.png]: https://img-blog.csdnimg.cn/d00424a74dc24bf499d56741becaaef2.png
[35d29916d03c4ef4b197c82c88a81117.png]: https://img-blog.csdnimg.cn/35d29916d03c4ef4b197c82c88a81117.png
[f44fe235e1f940309fc69138f911273e.png]: https://img-blog.csdnimg.cn/f44fe235e1f940309fc69138f911273e.png
[f29747812c3d40d3a69590ca1e5de183.png]: https://img-blog.csdnimg.cn/f29747812c3d40d3a69590ca1e5de183.png
[69ca440fa86c44baa2e6a5c48fd5c012.png]: https://img-blog.csdnimg.cn/69ca440fa86c44baa2e6a5c48fd5c012.png
[ba5d463d34f9407384f65cdf5ca83f08.png]: https://img-blog.csdnimg.cn/ba5d463d34f9407384f65cdf5ca83f08.png
[486a74aa280548f2baf2eba4fca6877a.png]: https://img-blog.csdnimg.cn/486a74aa280548f2baf2eba4fca6877a.png
[bfc7a09ce35d4cc98da7f526eb827afe.png]: https://img-blog.csdnimg.cn/bfc7a09ce35d4cc98da7f526eb827afe.png
[dd766d8507734a9488380639f17d1e28.png]: https://img-blog.csdnimg.cn/dd766d8507734a9488380639f17d1e28.png
[d265fc36d35b418bad8120d4feddc11e.png]: https://img-blog.csdnimg.cn/d265fc36d35b418bad8120d4feddc11e.png
[75fc858d33c649f4970f8557d896ea9f.png]: https://img-blog.csdnimg.cn/75fc858d33c649f4970f8557d896ea9f.png
[446f407205d0408cacbbbabe74ad19e7.png]: https://img-blog.csdnimg.cn/446f407205d0408cacbbbabe74ad19e7.png
[24ecc6b764a340ef977f53aaa8477f2d.png]: https://img-blog.csdnimg.cn/24ecc6b764a340ef977f53aaa8477f2d.png
[bb64fdcbf72f4db6881cf21ff01ab476.png]: https://img-blog.csdnimg.cn/bb64fdcbf72f4db6881cf21ff01ab476.png
[c083ef2efda34de49c1f2b379170fc28.png]: https://img-blog.csdnimg.cn/c083ef2efda34de49c1f2b379170fc28.png
[273d7511c1c44f9aa6089b3ff3afedf2.png]: https://img-blog.csdnimg.cn/273d7511c1c44f9aa6089b3ff3afedf2.png
[ec378771488c46a494c5b443f2b396a5.png]: https://img-blog.csdnimg.cn/ec378771488c46a494c5b443f2b396a5.png
[627f1180a6eb4e259a894de2c3366726.png]: https://img-blog.csdnimg.cn/627f1180a6eb4e259a894de2c3366726.png