Prerequisites:
1. Visual Studio 2022 Community Edition (Free Edition)
2. Qt-6.5.1 version
Qt Vistual Studio Tools download
First open Visual Studio 2022 Community Edition:
After clicking the Extensions->Manage Extensions button, enter Qt in the search box, and click here to install the first extension.
After the Qt Visual Studio Tools extension plug-in is successfully installed, there will be an additional menu option "Qt VS Tools" in the extension menu item.
Vistual Studio 2022 Community Edition configures Qt 6
Enter Vistual Studio 2022 and click Extensions->Qt VS Tool->Qt Versions
After entering Qt Versions, click Qt -> Versions.
配置Qt 6 地址:D:\Qt\6.5.1\msvc2019_64\bin\Vistual Studio 2022 Create Qt 6 project
Create a Qt project.
Click next:
Click next:
Qt application entry: main.cpp
Qt application UI design file: QtWidgetsApplication_One.ui
Qt application component corresponding header file: QtWidgetsApplication_One.h
Class file corresponding to Qt application components: QtWidgetsApplication_One.cpp
Qt applications inherit the base class: QMainWindows
Qt application resource file: QtWidgetsApplication_One.qrc
Click the Finsh button:
Running effect display:
Vistual Studio 2022 cannot open the *.UI file in the Qt project normally
When we double-click the *.UI file, the following pop-up window will appear.
How to solve such problems?
Please follow these steps:
Right-click the .ui file ===> Open with ===> Add ===> Find the .exe file under the corresponding file ===> Name it whatever you want
UI effect display:
Vistual Studio 2022 Community Edition Qt project involves a simple login page
Add the following component list to the QtWidgetsApplication_One.ui file:
3 Label labels
2 Line Edit input text boxes
2 Push Button buttons
1 CheckBox Button button
Display of QtWidgetsApplication_One.ui in the designer:
Click Ctral + S to save the shortcut and run the main.cpp method of the QtWidgetsApplication_One project again.
Vistual Studio 2022 Community Edition Qt project involves multiple UI pages
In actual Qt project development, multiple UI pages and corresponding header files and Class files need to be used.
Qt project-》Form Files right-click
I added the addFrom.ui file here, and the prototype design is as shown below:
How to solve the problem of generating header files and Class files based on *.UI files?
Please follow these steps:
Step one: Select the UI file that needs to be compiled in the Qt 6 project and click compile. I chose the custom addFrom.ui file here.
Compilation result: A header file named: ui_addFrom.h will be generated in the directory occupied by the Qt project ->X64->Debug ->uic folder.
View file content (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
Highlights:
1. Declare a namespace: namespae Ui.
2. Define the implementation class corresponding to the custom addFrom.ui: Ui_From.
3. Define the class Ui_From to access the alias From in the namespace Ui.
Step 2: Add the AddFrom.h header file corresponding to addFrom.ui in Qt Project->Header Files.
Main purpose: refer to the addFrom.ui implementation class in the "ui_addFrom.h" header file: Ui::Form ui
addFrom.h header file source code:
#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;
};
Step 3: Add the implementation class addFrom.cpp corresponding to addFrom.h in Qt Project->Source Files.
#include "addFrom.h"
AddFrom::AddFrom(QWidget* parent)
: QMainWindow(parent)
{
ui.setupUi(this);
}
AddFrom::~AddFrom()
{}
Overall project structure:
Step 4: Replace the main.cpp file in the program library with the addFrom.h file
#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();
}
Effect screenshot:
Vistual Studio 2022 Community Edition Qt project involves multiple UI page jumps
In the previous case, we covered the login page and the registration page. How to connect the two pages in series? We will use slots and functions to jump to the registration page through the login button on the login page.
Step one: Define the slot function in the QtWidgetsApplication_One.h header file:
//Define slot function
public slots:
void gotoFrom();
QtWidgetsApplication_One.h source file:
#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;
};
Step 2: In the QtWidgetsApplication_One.h header file corresponding to the QtWidgetsApplication_One.cpp file, implement the binding of the PushButton signal event and the slot function.
核心代码片段:
在初始化构造函数中完成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 console output string source code.
#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 按钮点击事件触发 ";
}
Show results:
A fly in the ointment: the output of Hanzi displays garbled characters.
Step 3: In the QtWidgetsApplication_One.cpp file, add dependency on the jump page header file ("addFrom.h"). And implement page jump in the slot function gotoFrom().
核心代码片段:
1、添加跳转页面的头文件
#include "addFrom.h"
2、在自定义槽函数实现页面跳转
void QtWidgetsApplication_One::gotoFrom() {
qDebug() << "pushButton 按钮点击事件触发 ";
// 当前页面关闭
this->close();
// 跳转页面显示
AddFrom* from = new AddFrom();
from->show();
}QtWidgetsApplication_One.cpp page jump.
#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();
}
Show results:
So far, that’s enough about the attention to detail of Visual Studio 2022 + Qt 6 in the Windows development environment.