【QT入门到实战】-02-QT应用案例

2.1 QT 应用案例-Designer 实现方式

2.1.1 拖拽布局

创建项目之后， 双击dialog.ui，进入界面设计器Qt Designer编辑状态，开始进行设计器 （Qt Designer）编程。

拖曳控件容器栏的滑动条，在最后的Display Widgets容器栏中找到Label标签控件，拖曳三个此控件到中间的编辑框中

在Input Widgets容器栏中找到LineEdit文本控件，拖曳此 控件到中间的编辑框中，用于输入半径值

在Buttons容器栏中找到PushButton按钮控件，拖曳此控件 到中间的编辑框中，用于提交响应单击事件

调整各控件的位置，单击编辑框的空白处使编辑框处于被选中状态，拖曳右下 角的小方框，调整整个框架的大小，直至调整到适当大小为止，调整后的布局如图

控件如图所示：

2.1.2 修改控件属性

修改控件Text值的方法有如下两种。

• 直接双击控件本身即可修改。
• 在Qt Designer设计器的属性栏中修改，如修改表示半径的Label标签 ，如图所示：

最后，修改 label_3 的"frameShape"为Panel；"frameShadow"为 Sunken，如图1.19所示。最终效果如图所示。

最终调整的效果如图所示：

下面单击左下角的运行按钮，或者使用组合键【Ctrl+R】运行程序，这 时系统提示是否保存，单击"保存所有"按钮

2.1.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();
}

代码解释：

1. Qt系统提供的标准类名声明头文件没有.h后缀
2. Qt一个类对应一个头文件，类名就是头文件名
3. QApplication应用程序类

• 管理图形用户界面应用程序的控制流和主要设置。
• 是Qt的整个后台管理的命脉它包含主事件循环 ，在其中来自窗口系统和其它资源的所有事件处理和调度 。它也处理应用程序的初始化和结束 ，并且提供对话管理。
• 对于任何一个使用Qt的图形用户界面应用程序，都正好存在一个QApplication 对象，而不论这个应用程序在同一时间内是不是有0、1、2或更多个窗口。

4. a.exec()

程序进入消息循环 ，等待对用户输入进行响应。这里main()把控制权转交给Qt，Qt完成事件处理工作，当应用程序退出的时候exec()的值就会返回。在exec()中，Qt接受并处理用户和系统的事件并且把它们传递给适当的窗口部件。

功能实现方式一：

在LineEdit文本框内输入半径值，然后单击"计算"按钮，则在 label_3 中显示对应的圆面积。编写代码步骤如下。

1. 在"计算"按钮上单击鼠标右键，在弹出的下拉菜单中选择"转到 槽..."命令。在弹出的对话框中选择"clicked()"信号。

2. 进入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 中显示圆面积。编写代码步骤如下。

1. 在"LineEdit"编辑框上单击鼠标右键，在弹出的下拉菜单中选择"转 到槽..."菜单项，在弹出的对话框中选择"textChanged(QString)"信号，如图

2. 单击"确定"按钮，进入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.2 QT 应用案例-代码实现方式

2.2.1 布局搭建

1. 首先创建一个新工程。创建过程和前面基本相同，在第（5）步骤中，取消"创建界面"复选框的选中状态。

2. 在上述工程的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>

3. 在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.2.2 功能实现 1

在LineEdit文本框内输入所需圆的半径值，单击"显示对应圆的面积" 按钮后，在label2中显示相对应的圆的面积值。

1. 打开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

2. 打开dialog.cpp 文件，在构造函数中添加如下connect中的代码：

Dialog::Dialog(QWidget *parent) : QDialog(parent)

{

... ...

mainLayout->addWidget(button,1,1);  
connect(button,SIGNAL(clicked()),this,SLOT(showArea()));

}

3. 在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));

}

4. 在LineEdit中输入圆半径值，单击"显示对应圆的面积"按钮后，在 label2中显示圆面积值

2.2.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()));

}

博主视频教程传送门 ^_^ 欢迎关注