Qt designer 的 ui 文件的使用_.ui转换为.h

Qt designer 的 ui 文件的使用

Qt框架的Qt Designer可以可视化设计UI界面并生成后缀名为.ui的ui文件。
使用该文件的方法如下：

1.将.ui文件转换为.h文件

第一步：打开 Qt 命令行工具，进入到项目目录
第二步：执行转换命令：

uic hello.ui -o ui_hello.h
1

2.将ui_hello.h在项目的hello.h文件中引入并使用

有两种方式：继承与组合
继承方式：

/*hello.h*/
#include <QtWidgets/QDialog>
#include "ui_hello.h"
class hello : public QMainWindow ,public Ui::hello  //继承Ui中的hello类
{
    Q_OBJECT

public:
	hello(QWidget *parent = Q_NULLPTR);

};
1
2
3
4
5
6
7
8
9
10
11

/*hello.cpp*/
#include "hello.h"
hello::hello(QWidget *parent)
    : QMainWindow(parent)	
{
	setupUi(this);
}
1
2
3
4
5
6
7

组合方式：

/*hello.h*/
#include <QtWidgets/QDialog>
#include "ui_hello.h"
class hello : public QMainWindow ,public Ui::hello  //继承Ui中的hello类
{
    Q_OBJECT

public:
	hello(QWidget *parent = Q_NULLPTR);
    ~hello(void);           //注意添加析构函数

private:
	//通过“ui->”访问界面相关代码
	Ui::hello *ui;

};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*hello.cpp*/
#include "hello.h"
hello::hello(QWidget *parent)
    : QMainWindow(parent) :ui(new Ui::hello)	
{
	ui->setupUi(this);      //通过“ui->”访问界面相关代码
}
hello::~hello(void){        //注意添加析构函数
    delete ui;

}

1
2
3
4
5
6
7
8
9
10
11
12

方便理解，使用 Qt designer 设计一个登录框。

使用designer设计登录框

另存为：LoginDialog.ui
打开Qt命令行：

uic LoginDialog.ui -o ui_LoginDialog.h
1

生成的ui_LoginDialog.h文件如下：

/********************************************************************************
** Form generated from reading UI file 'LoginDialog.ui'
**
** Created by: Qt User Interface Compiler version 5.14.2
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_LOGINDIALOG_H
#define UI_LOGINDIALOG_H

#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QDialog>
#include <QtWidgets/QDialogButtonBox>
#include <QtWidgets/QGridLayout>
#include <QtWidgets/QHBoxLayout>
#include <QtWidgets/QLabel>
#include <QtWidgets/QLineEdit>
#include <QtWidgets/QSpacerItem>
#include <QtWidgets/QVBoxLayout>

QT_BEGIN_NAMESPACE

class Ui_LoginDialog
{
public:
    QVBoxLayout *verticalLayout;
    QSpacerItem *verticalSpacer;
    QGridLayout *gridLayout;
    QLabel *label;
    QLineEdit *m_usernameEdit;
    QLabel *label_2;
    QLineEdit *m_passwordEdit;
    QHBoxLayout *horizontalLayout;
    QSpacerItem *horizontalSpacer;
    QDialogButtonBox *m_btnBox;
    QSpacerItem *horizontalSpacer_2;
    QSpacerItem *verticalSpacer_2;

    void setupUi(QDialog *LoginDialog)
    {
        if (LoginDialog->objectName().isEmpty())
            LoginDialog->setObjectName(QString::fromUtf8("LoginDialog"));
        LoginDialog->resize(383, 211);
        QFont font;
        font.setFamily(QString::fromUtf8("Arial Narrow"));
        font.setPointSize(12);
        font.setBold(true);
        font.setWeight(75);
        LoginDialog->setFont(font);
        verticalLayout = new QVBoxLayout(LoginDialog);
        verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));
        verticalSpacer = new QSpacerItem(20, 39, QSizePolicy::Minimum, QSizePolicy::Expanding);

        verticalLayout->addItem(verticalSpacer);

        gridLayout = new QGridLayout();
        gridLayout->setObjectName(QString::fromUtf8("gridLayout"));
        label = new QLabel(LoginDialog);
        label->setObjectName(QString::fromUtf8("label"));

        gridLayout->addWidget(label, 0, 0, 1, 1);

        m_usernameEdit = new QLineEdit(LoginDialog);
        m_usernameEdit->setObjectName(QString::fromUtf8("m_usernameEdit"));

        gridLayout->addWidget(m_usernameEdit, 0, 1, 1, 1);

        label_2 = new QLabel(LoginDialog);
        label_2->setObjectName(QString::fromUtf8("label_2"));

        gridLayout->addWidget(label_2, 1, 0, 1, 1);

        m_passwordEdit = new QLineEdit(LoginDialog);
        m_passwordEdit->setObjectName(QString::fromUtf8("m_passwordEdit"));
        m_passwordEdit->setEchoMode(QLineEdit::Password);

        gridLayout->addWidget(m_passwordEdit, 1, 1, 1, 1);


        verticalLayout->addLayout(gridLayout);

        horizontalLayout = new QHBoxLayout();
        horizontalLayout->setObjectName(QString::fromUtf8("horizontalLayout"));
        horizontalSpacer = new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout->addItem(horizontalSpacer);

        m_btnBox = new QDialogButtonBox(LoginDialog);
        m_btnBox->setObjectName(QString::fromUtf8("m_btnBox"));
        m_btnBox->setStandardButtons(QDialogButtonBox::Cancel|QDialogButtonBox::Ok);

        horizontalLayout->addWidget(m_btnBox);

        horizontalSpacer_2 = new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout->addItem(horizontalSpacer_2);


        verticalLayout->addLayout(horizontalLayout);

        verticalSpacer_2 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

        verticalLayout->addItem(verticalSpacer_2);


        retranslateUi(LoginDialog);

        QMetaObject::connectSlotsByName(LoginDialog);
    } // setupUi

    void retranslateUi(QDialog *LoginDialog)
    {
        LoginDialog->setWindowTitle(QCoreApplication::translate("LoginDialog", "\347\231\273\345\275\225", nullptr));
        label->setText(QCoreApplication::translate("LoginDialog", "\347\224\250\346\210\267\345\220\215:", nullptr));
        label_2->setText(QCoreApplication::translate("LoginDialog", "\345\257\206    \347\240\201:", nullptr));
        m_passwordEdit->setText(QString());
    } // retranslateUi

};

namespace Ui {
    class LoginDialog: public Ui_LoginDialog {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_LOGINDIALOG_H


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

新建qt项目

我的项目目录为：E:\Project\Login\Login\Login
将ui_LoginDialog.h的文件导入项目

关于Login.h中需要注意的几点

首先 #include “ui_LoginDialog.h” 引入，以组合方式编写

1. 注意写析构函数 ~Login(void);
2. 声明 Ui::LoginDialog* ui = nullptr; 中的ui的对象需要初始化为nullptr
3. 构造函数中,需要为ui申请堆空间

ui = new Ui::LoginDialog();
	ui->setupUi(this);
1
2

4. 析构函数中，在堆中delete了ui以后需要将ui置空，确保delete成功。

Login::~Login(void) {
	delete ui;
	ui = nullptr;
}
1
2
3
4

详细代码如下：

#pragma once

#include <QtWidgets/QDialog>
#include "ui_Login.h"
#include "ui_LoginDialog.h"
#include <QMessageBox>	//消息提示框
#include <QDebug>

class Login : public QDialog
{
    Q_OBJECT

public:
    Login(QWidget *parent = Q_NULLPTR);
	~Login(void);
public slots:
	void onAccepted(void);//处理ok按钮
	void onRejected(void);//处理Cancel按钮

private:
    Ui::LoginDialog* ui = nullptr;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Login.cpp

#include "Login.h"
#pragma execution_character_set("utf-8")    //宏定义编码

Login::Login(QWidget *parent)
    : QDialog(parent)
{
	ui = new Ui::LoginDialog();
	ui->setupUi(this);
	connect(ui->m_btnBox,SIGNAL(accepted(void)),this,SLOT(onAccepted(void)));
	connect(ui->m_btnBox, SIGNAL(rejected(void)), this, SLOT(onRejected(void)));

}

Login::~Login(void) {
	delete ui;
	ui = nullptr;
}


//槽函数
void Login::onAccepted(void) {
	//user/123456
	if (ui->m_usernameEdit->text() == "user"&&ui->m_passwordEdit->text() == "123456") {
		qDebug() << "登录成功！";
		close();

	}
	else if(ui->m_passwordEdit->text() == NULL|| ui->m_usernameEdit->text() == NULL){
		QMessageBox msgBox(
			QMessageBox::Warning,	
			"Warning",				//窗口标题
			"请输入账号和密码！",		//提示文本
			QMessageBox::Ok,		//按钮
			this);
		msgBox.exec();				//进入事件循环，停留到当前消息提示框界面
	}else {
		QMessageBox msgBox(
			QMessageBox::Critical,	//图标
			"Error",				//窗口标题
			"用户名或密码错误",		//提示文本
			QMessageBox::Ok,		//按钮
			this);
		msgBox.exec();				//进入事件循环，停留到当前消息提示框界面
	}
}


void Login::onRejected(void) {
		QMessageBox msgBox(
			QMessageBox::Question,	//图标
			"登录",				//窗口标题
			"是否确定取消登录？",		//提示文本
			QMessageBox::Yes| QMessageBox::No,		//按钮
			this);
		if (msgBox.exec()== QMessageBox::Yes) {
			close();
		}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

main.cpp

#include "Login.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Login w/* = new Login()*/;
    w.show();
    return a.exec();
}

1
2
3
4
5
6
7
8
9
10
11

关于堆栈

以下内容引用自 https://blog.csdn.net/wzx19840423/article/details/6460603

1. 栈区（stack）： 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
2. 堆区（heap）： 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收。
3. 全局区（静态区）：全局变量和静态变量的存储是放在一块的，初始化的全局变量和静态变量在一块区域， 未初始化的全局变量和未初始化的静态变量在相邻的另一块区域。程序结束后有系统释放。
4. 文字常量区 ：常量字符串就是放在这里的。 程序结束后由系统释放
5. 程序代码区 ：存放函数体的二进制代码。

使用designer写一个图片预览器

1.资源准备

首先获取十张图片资源文件

将资源文件导入项目，存储为静态的二进制文件

2.绘制UI

显示图片使用Frame控件，另外两个button控制上下张图片切换

为button添加槽函数

3.编写代码

3.1. 与前面一样，先将.ui转为.h文件
转换后的头文件如下所示，无需做任何修改。可以发现，在designer中添加槽/信号函数以后系统自动帮我们在文件中进行了连接，我们只需要在项目的类源文件中声明与定义槽/信号函数即可。

ui_ImgShow.h

/********************************************************************************
** Form generated from reading UI file 'ImgShow.ui'
**
** Created by: Qt User Interface Compiler version 5.14.2
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_IMGSHOW_H
#define UI_IMGSHOW_H

#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QFrame>
#include <QtWidgets/QHBoxLayout>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QSpacerItem>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE

class Ui_ImgShow
{
public:
    QHBoxLayout *horizontalLayout_2;
    QVBoxLayout *verticalLayout;
    QFrame *frame;
    QHBoxLayout *horizontalLayout;
    QSpacerItem *horizontalSpacer;
    QPushButton *m_btnPrev;
    QPushButton *m_btnNext;

    void setupUi(QWidget *ImgShow)
    {
        if (ImgShow->objectName().isEmpty())
            ImgShow->setObjectName(QString::fromUtf8("ImgShow"));
        ImgShow->resize(813, 535);
        QFont font;
        font.setFamily(QString::fromUtf8("Arial"));
        font.setPointSize(14);
        ImgShow->setFont(font);
        horizontalLayout_2 = new QHBoxLayout(ImgShow);
        horizontalLayout_2->setObjectName(QString::fromUtf8("horizontalLayout_2"));
        verticalLayout = new QVBoxLayout();
        verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));
        frame = new QFrame(ImgShow);
        frame->setObjectName(QString::fromUtf8("frame"));
        QSizePolicy sizePolicy(QSizePolicy::Preferred, QSizePolicy::Expanding);
        sizePolicy.setHorizontalStretch(0);
        sizePolicy.setVerticalStretch(0);
        sizePolicy.setHeightForWidth(frame->sizePolicy().hasHeightForWidth());
        frame->setSizePolicy(sizePolicy);
        frame->setFrameShape(QFrame::Box);
        frame->setFrameShadow(QFrame::Raised);

        verticalLayout->addWidget(frame);

        horizontalLayout = new QHBoxLayout();
        horizontalLayout->setObjectName(QString::fromUtf8("horizontalLayout"));
        horizontalSpacer = new QSpacerItem(98, 28, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout->addItem(horizontalSpacer);

        m_btnPrev = new QPushButton(ImgShow);
        m_btnPrev->setObjectName(QString::fromUtf8("m_btnPrev"));

        horizontalLayout->addWidget(m_btnPrev);

        m_btnNext = new QPushButton(ImgShow);
        m_btnNext->setObjectName(QString::fromUtf8("m_btnNext"));

        horizontalLayout->addWidget(m_btnNext);


        verticalLayout->addLayout(horizontalLayout);


        horizontalLayout_2->addLayout(verticalLayout);


        retranslateUi(ImgShow);
        QObject::connect(m_btnPrev, SIGNAL(clicked()), ImgShow, SLOT(onBtnPrev()));
        QObject::connect(m_btnNext, SIGNAL(clicked()), ImgShow, SLOT(onBtnNext()));

        QMetaObject::connectSlotsByName(ImgShow);
    } // setupUi

    void retranslateUi(QWidget *ImgShow)
    {
        ImgShow->setWindowTitle(QCoreApplication::translate("ImgShow", "IMGSHOW", nullptr));
        m_btnPrev->setText(QCoreApplication::translate("ImgShow", "\344\270\212\344\270\200\345\274\240", nullptr));
        m_btnNext->setText(QCoreApplication::translate("ImgShow", "\344\270\213\344\270\200\345\274\240", nullptr));
    } // retranslateUi

};

namespace Ui {
    class ImgShow: public Ui_ImgShow {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_IMGSHOW_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

详细代码如下：

ImgShow.h

#pragma once

#include <QtWidgets/QWidget>	
#include "ui_ImgShow.h"			//引入ui头文件
#include <QPainter>				//“画家类”具有绘图功能
#include <QImage>				//图片类

class ImgShow : public QWidget
{
    Q_OBJECT

public:
    ImgShow(QWidget *parent = Q_NULLPTR);
	ImgShow::~ImgShow(void);
public slots:
	void onBtnPrev();
	void onBtnNext();
private:
	void paintEvent(QPaintEvent *);//绘图事件处理函数
	int m_index=0;		//增加一个成员变量，用于图片索引
    Ui::ImgShow *ui = nullptr;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ImgShow.cpp

#include "ImgShow.h"
#pragma execution_character_set("utf-8")    //宏定义编码

ImgShow::ImgShow(QWidget *parent)
    : QWidget(parent)
{
	ui = new Ui::ImgShow();
    ui->setupUi(this);
}

ImgShow::~ImgShow(void)
{
	delete ui;
}
void ImgShow::onBtnPrev() {
	if (--m_index < 0) {
		m_index = 9;
	}
	update();//重新触发绘图事件
}
void ImgShow::onBtnNext() {
	if (++m_index > 9) {
		m_index = 0;
	}
	update();//重新触发绘图事件
}

void ImgShow::paintEvent(QPaintEvent *) {
	//qDebug("绘图事件");
	//显示图片
	//1)创建画家对象
	QPainter painter(this);//参数：绘图位置
	//2)获取绘图所在区域
	QRect rect = ui->frame->frameRect();
	rect.translate(ui->frame->pos());
	//3)构建1要绘制的图形对象（资源）
	QImage image(":/ImgShow/images/"+QString::number(m_index)+".jpg");
	//4)绘制操作
	painter.drawImage(rect, image);

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

main.cpp

#include "ImgShow.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    ImgShow w;
    w.show();
    return a.exec();
}
1
2
3
4
5
6
7
8
9
10

效果预览

2021 7 12
by zhzhang