2.4 QT 应用案例-Designer 实现方式
2.4.1 拖拽布局
创建项目之后， 双击dialog.ui，进入界面设计器Qt Designer编辑状态，开始进行设计器 （Qt Designer）编程。
拖曳控件容器栏的滑动条，在最后的Display Widgets容器栏中找到Label标签控件，拖曳三个此控件到中间的编辑框中
在Input Widgets容器栏中找到LineEdit文本控件，拖曳此 控件到中间的编辑框中，用于输入半径值
在Buttons容器栏中找到PushButton按钮控件，拖曳此控件 到中间的编辑框中，用于提交响应单击事件
调整各控件的位置，单击编辑框的空白处使编辑框处于被选中状态，拖曳右下 角的小方框，调整整个框架的大小，直至调整到适当大小为止，调整后的布局如图
控件如图所示：
2.4.2 修改控件属性
修改控件Text值的方法有如下两种。
- 直接双击控件本身即可修改。
- 在Qt Designer设计器的属性栏中修改，如修改表示半径的Label标签 ，如图所示：
最后，修改 label_3 的“frameShape”为Panel；“frameShadow”为 Sunken，如图1.19所示。最终效果如图所示。
最终调整的效果如图所示：
下面单击左下角的运行按钮，或者使用组合键【Ctrl+R】运行程序，这 时系统提示是否保存，单击“保存所有”按钮
2.4.2 功能实现
编写相应的计算圆面积代码
首先简单认识一下Qt编程环境。找到文件列表中自动添加的main.cpp文件，
每个工程都有一个执行的入口函数，此文件中的main()函数就是此工 程的入口。下面详细介绍一下main()函数的相关内容：
#include "widget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
//a应用程序对象，在Qt中，应用程序对象 有且仅有一个
QApplication a(argc, argv);
//对话框对象 Dialog父类 -> QDialog
Dialog w;
//窗口对象 默认不会显示，必须要调用show方法显示窗口
w.show();
//让应用程序对象进入消息循环
//当代码阻塞到这行
return a.exec();
}
代码解释：
- Qt系统提供的标准类名声明头文件没有.h后缀
- Qt一个类对应一个头文件，类名就是头文件名
- QApplication应用程序类
- 管理图形用户界面应用程序的控制流和主要设置。
- 是Qt的整个后台管理的命脉它包含主事件循环，在其中来自窗口系统和其它资源的所有事件处理和调度。它也处理应用程序的初始化和结束，并且提供对话管理。
- 对于任何一个使用Qt的图形用户界面应用程序，都正好存在一个QApplication 对象，而不论这个应用程序在同一时间内是不是有0、1、2或更多个窗口。
- a.exec()
程序进入消息循环，等待对用户输入进行响应。这里main()把控制权转交给Qt，Qt完成事件处理工作，当应用程序退出的时候exec()的值就会返回。在exec()中，Qt接受并处理用户和系统的事件并且把它们传递给适当的窗口部件。
功能实现方式一：
在LineEdit文本框内输入半径值，然后单击“计算”按钮，则在 label_3 中显示对应的圆面积。编写代码步骤如下。
- 在“计算”按钮上单击鼠标右键，在弹出的下拉菜单中选择“转到 槽...”命令。在弹出的对话框中选择“clicked()”信号。
- 进入dialog.cpp文件中按钮单击事件的槽函数on_countBtn_clicked()。信号与槽连接的具体说明参照本书后面提供的知识点链接部分。在此函数中添加如下代码：
void Dialog::on_pushButton_clicked()
{
bool ok;
QString tempStr;
// 获取输入框中输入的半径
QString valueStr=ui->lineEdit->text();
// 输入框中默认获取的是字符串类型，需要转换成int类型才能运算
int valueInt = valueStr.toInt(&ok);
// 计算面积
double area = valueInt*valueInt*PI;
// 将计算出的面积设置到面板中
ui->label_3->setText(tempStr.setNum(area));
}注意，在此文件开始处定义 PI，定义方式可以使用宏，或者常量都可。
#define PI 3.1416运行效果：
功能实现方式 二：
在LineEdit内输入半径值，不需要单击按钮触发单击事件，直接就在 label_3 中显示圆面积。编写代码步骤如下。
- 在“LineEdit”编辑框上单击鼠标右键，在弹出的下拉菜单中选择“转 到槽...”菜单项，在弹出的对话框中选择“textChanged(QString)”信号，如图
- 单击“确定”按钮，进入dialog.cpp文件中的文本编辑框，改变值内容事 件的槽函数on_radiusLineEdit_textChanged(const QString &arg1)。在此函数中添 加如下代码：
void Dialog::on_lineEdit_textChanged(const QString &arg1)
{
bool ok;
QString tempStr;
// 获取输入框中输入的半径
QString valueStr=ui->lineEdit->text();
// 输入框中默认获取的是字符串类型，需要转换成int类型才能运算
int valueInt = valueStr.toInt(&ok);
// 计算面积
double area = valueInt*valueInt*PI;
// 将计算出的面积设置到面板中
ui->label_3->setText(tempStr.setNum(area));
}2.5 QT 应用案例-代码实现方式
2.5.1 布局搭建
首先创建一个新工程。创建过程和前面基本相同，在第（5）步骤中，取消“创建界面”复选框的选中状态。
- 在上述工程的dialog.h中添加代码
#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
class Dialog : public QDialog
{
Q_OBJECT
public:
Dialog(QWidget *parent = nullptr);
~Dialog();
private:
QLabel *label1,*label2;
QLineEdit *lineEdit;
QPushButton *button;
};
#endif // DIALOG_H
- 注意需要引入以下头文件
#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>- 在dialog.cpp 中添加如下代码：
#include "dialog.h"
#include<QGridLayout>
Dialog::Dialog(QWidget *parent)
: QDialog(parent)
{
// 创建文本标签
label1 = new QLabel(this);
// 设置文本标签中的内容
label1->setText(tr("请输入圆的半径:"));
// 创建文本输入框
lineEdit = new QLineEdit(this);
// 创建文本标签
label2 = new QLabel(this);
// 创建按钮
button = new QPushButton(this);
// 设置按钮中的文本内容
button->setText(tr("显示对应圆的面积:"));
// 创建整体布局(网格布局)
// 网格布局为多行多列的格子。行号和列号都是从0开始
QGridLayout *mainLayout = new QGridLayout(this);
// 将label1加入到网格布局的第0行第0列
mainLayout->addWidget(label1,0,0);
// 将lineEdit加入到网格布局的第0行第1列
mainLayout->addWidget(lineEdit,0,1);
// 将label2 加入到网格布局的第1行第0列
mainLayout->addWidget(label2,1,0);
// 将button加入到网格布局的第1行第1列
mainLayout->addWidget(button,1,1);
}
Dialog::~Dialog()
{
}
- 注意添加头文件：
#include<QGridLayout>运行效果：
2.5.2 功能实现 1
在LineEdit文本框内输入所需圆的半径值，单击“显示对应圆的面积” 按钮后，在label2中显示相对应的圆的面积值。
打开dialog.h文件，在类构造函数和控件成员声明后，添加如下代码：
class Dialog : public QDialog
{
... ...
QPushButton *button;
private slots: void showArea();
};完整代码如下：
#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
class Dialog : public QDialog
{
Q_OBJECT
public:
Dialog(QWidget *parent = nullptr);
~Dialog();
private:
QLabel *label1,*label2;
QLineEdit *lineEdit;
QPushButton *button;
// 定义插槽
private slots:
void showArea();
};
#endif // DIALOG_H
- 打开dialog.cpp 文件，在构造函数中添加如下connect代码：
Dialog::Dialog(QWidget *parent) : QDialog(parent)
{
... ...
mainLayout->addWidget(button,1,1);
connect(button,SIGNAL(clicked()),this,SLOT(showArea()));
}- 在showArea()中实现显示圆面积功能，代码如下：
void Dialog::showArea(){
bool ok;
QString tempStr;
// 获取输入框中输入的半径
QString valueStr=lineEdit->text();
// 输入框中默认获取的是字符串类型，需要转换成int类型才能运算
int valueInt = valueStr.toInt(&ok);
// 计算面积
double area = valueInt*valueInt*PI;
// 将计算出的面积设置到面板中
label2->setText(tempStr.setNum(area));
}完整代码：
#include "dialog.h"
#include<QGridLayout>
#define PI 3.1416
Dialog::Dialog(QWidget *parent)
: QDialog(parent)
{
// 创建文本标签
label1 = new QLabel(this);
// 设置文本标签中的内容
label1->setText(tr("请输入圆的半径:"));
// 创建文本输入框
lineEdit = new QLineEdit(this);
// 创建文本标签
label2 = new QLabel(this);
// 创建按钮
button = new QPushButton(this);
// 设置按钮中的文本内容
button->setText(tr("显示对应圆的面积:"));
// 创建整体布局(网格布局)
// 网格布局为多行多列的格子。行号和列号都是从0开始
QGridLayout *mainLayout = new QGridLayout(this);
// 将label1加入到网格布局的第0行第0列
mainLayout->addWidget(label1,0,0);
// 将lineEdit加入到网格布局的第0行第1列
mainLayout->addWidget(lineEdit,0,1);
// 将label2 加入到网格布局的第1行第0列
mainLayout->addWidget(label2,1,0);
// 将button加入到网格布局的第1行第1列
mainLayout->addWidget(button,1,1);
// 连接按钮和插槽
connect(button,SIGNAL(clicked()),this,SLOT(showArea()));
}
Dialog::~Dialog()
{
}
void Dialog::showArea(){
bool ok;
QString tempStr;
// 获取输入框中输入的半径
QString valueStr=lineEdit->text();
// 输入框中默认获取的是字符串类型，需要转换成int类型才能运算
int valueInt = valueStr.toInt(&ok);
// 计算面积
double area = valueInt*valueInt*PI;
// 将计算出的面积设置到面板中
label2->setText(tempStr.setNum(area));
}
在LineEdit中输入圆半径值，单击“显示对应圆的面积”按钮后，在 label2中显示圆面积值
2.5.3 功能实现 2
在LineEdit文本框中输入所需圆的半径值后，不必单击“显示对应圆 的面积”按钮，直接在label2中显示圆的面积值。操作步骤和方式1相同，只是在 上述第（2）步骤中，添加的代码修改为如下connect代码：
Dialog::Dialog(QWidget *parent) : QDialog(parent)
{
... ...
mainLayout->addWidget(button,1,1);
connect(lineEdit,SIGNAL(textChanged(QString)),this,SLOT(showArea()));
}
1380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
