C＋Qt笔记006：Qt开发步骤与计算圆面积实例

最近有点忙！

对微信平台的数据分析后发现，关注的朋友不帮我分享文章！

文章虽然丑陋！

我不开心！

C++Qt笔记006：Qt开发步骤与计算圆面积实例

目录

C++Qt笔记006：Qt开发步骤与实例...1

摘要：...2

一、实例介绍...2

二、使用Qt Designer进行GUI应用程序开发...2

（一）界面元素分析...2

（二）控件属性修改...3

（三）借助Qt设计师编写计算圆面积代码...4

（四）ui界面布局管理...5

三、使用纯代码进行GUI应用程序开发...6

（一）代码实现功能分析...7

（二）添加界面控件...7

（三）空间属性设置...8

（四）Qt布局管理器的简单介绍...9

（五）编写计算圆面积代码...9

2018-5-1408:52:45

该文持续修正中，有错误请指出，不胜感激！

转载请注明出处！微信公众号：依法编程

原作者保留使用权利，未经许可严禁用于个人商业用途

摘要：

借助一个简单的实例熟悉一下Qt的开发步骤，以及一些常用控件的使用和布局管理。

一、实例介绍

实现功能：当用户输入一个圆的半径（正整数）之后，可以显示计算后的圆的面积值。效果图如下：

转载请注明出处！微信公众号：依法编程

二、使用Qt Designer进行GUI应用程序开发

Qt开发应用程序既可以采用设计器Qt Designer方法，也可以采用编写代码方法。

下面首先使用Qt Designer进行GUI应用程序开发，熟悉一下Qt开发程序的流程。

（一）界面元素分析

新建项目，基类选择QDialog，双击dialog.ui进入Qt设计师界面。

先对效果图进行分析。

【1】需要修改Dialog对话框的标题为ShowArea；

【2】需要三个显示控件，分别用于提示半径输入区域、提示面积显示区域和显示面积；

【3】需要一个输入控件，用于用户输入半径；

【4】一个按钮控件，用于提交响应单击事件。

1、在QtDesigner的对象编辑区，选中最上层的Dialog对象，修改其属性编辑区的QWidget父类中的WindowTitle属性值为ShowArea，即可完成对对话框标窗口标题的修改；

2、从控件区拖拽三个Label标签用于显示，一个LineEdit用于输入半径，一个Push Button用于提交响应单击事件。

（二）控件属性修改

下面将修改拖拽到编辑框中的各控件的属性，各控件属性见表。

其中，修改控件text值得方法有如下两种。

1、直接双击控件本身即可修改；

2、选中控，在Qt Designer设计器的属性栏中修改text的值；

（三）借助Qt设计师编写计算圆面积代码

有两种方式可以完成计算圆面积的功能。

一种是通过触发按钮事件完成，也就是说输入半径后，点击“计算”按钮，然后显示出面积值；

另一种是通过触发输入编辑框事件完成，也就是说在半径后面的LineEdit文本框内输入半径值，不需要单击按钮触发单击事件，直接就在areaLabel_output中显示圆面积。

1、方式一：通过触发按钮事件完成计算

（1）在此文件开始处添加以下语句，定义全局变量PI。

conststaticdoublePI=3.1416;

（2）在“计算”按钮上单击鼠标右键，在弹出的下拉菜单中选择“转到槽...”命令，在弹出的对话框中选择“clicked()”信号，进入槽函数。添加代码：

voidDialog::on_btn_count_clicked()

{

boolok;

QStringtempStr;

//获取radiusLineEdit_input文本框中的内容,字符串

QStringvalueStr=ui->radiusLineEdit_input->text();

//字符串转换为数值

intvalueInt=valueStr.toInt(&ok);

//计算圆面积

doublearea=PI*valueInt*valueInt;

//把整型，浮点型，或其他类型转化为QString，然后在areaLabel_output中显示

ui->areaLabel_output->setText(tempStr.setNum(area));

}

运行程序，在“LineEdit”文本框内输入半径值，点击“计算”按钮后，显示圆面积，完成计算圆面积功能。

2、方式二：通过触发输入编辑框事件完成

在“LineEdit”编辑框上单击鼠标右键，在弹出的下拉菜单中选择“转到槽...”菜单项，在弹出的对话框中选择“textChanged(QString)”信号。添加代码，运行程序即可。

//&arg1是最新的字符串的引用

voidDialog::on_radiusLineEdit_input_textChanged(constQString&arg1)

{

boolok;

QStringtempStr;

//获取radiusLineEdit_input文本框中的内容,字符串

//QStringvalueStr=ui->radiusLineEdit_input->text();

//字符串转换为数值

intvalueInt=arg1.toInt(&ok);//valueStr.toInt(&ok);

//计算圆面积

doublearea=PI*valueInt*valueInt;

//把整型，浮点型，或其他类型转化为QString然后在areaLabel_output显示标签中显示

ui->areaLabel_output->setText(tempStr.setNum(area));

}

说明，在方式二中，完全可以使用跟方式一同样的代码，但方式二使用的信号textChanged(QString)会传递最新的字符串的引用，因此可以免去获取字符串的操作。

（四）ui界面布局管理

上面虽然完成了基本的应用程序功能，但是界面上的控件排布是零散的，不具备美观性。

可以借助ui界面中的水平布局、垂直布局等进行控件的布局。

1、通过在控件之间添加Spacers控件，调整空间之间的间隔；

2、分别选中上面和下面一行，进行水平布局，并调整layoutStretch属性的值，使不同控件的大小和间隔合适；

3、选中所有控件，或者选中整个Dialog对象，进行垂直布局，调整layoutStretch属性的值，完成布局。

转载请注明出处！微信公众号：依法编程

三、使用纯代码进行GUI应用程序开发

下面使用编写代码的方法来实现计算圆面积的功能。

新建项目，注意在新建时取消“创建界面”复选框的选中状态。

（一）代码实现功能分析

上面我们创建ui界面时，是通过向ui界面中拖拽控件的方式添加了界面元素，通过ui界面中的属性区修改了控件的属性，通过ui界面的垂直布局和水平布局进行了控件在界面上的布局，通过ui界面控件转到槽创建了槽函数等，现在已经没有了ui界面，就需要用代码完成上面的功能。

【1】添加控件（界面元素）；

【2】控件属性修改，包括父窗口的绑定，控件显示文字等；

【3】控件布局；

【4】编写槽函数和信号与槽的连接等。

（二）添加界面控件

界面控件应该作为Dialog类的私有成员。在上述工程的dialog.h中添加如下加代码。

注意在文件中用到哪个类时，需要此文件开始部分引用包含此类的头文件。

#include

#include

#include

#include

classDialog:publicQDialog

{

Q_OBJECT

public:

Dialog(QWidget*parent=);

~Dialog();

private:

QPushButton*btn_count;//按钮

QLabel*radiusLabel_text;//半径输入提示文字

QLabel*areaLabel_text;//面积输出提示文字

QLabel*areaLabel_output;//面积输出区域

QLineEdit*radiusLineEdit_input;//半径输入区域

};

（三）空间属性设置

在dialog.cpp 中添加如下代码。

其中，QGridLayout *mainLayout=new QGridLayout(this)用于布局管理器，将所有控件的位置固定。

#include"dialog.h"

#include

#include

conststaticdoublePI=3.1416;

Dialog::Dialog(QWidget*parent)

:QDialog(parent)

{

//重新调整窗口大小

//this->resize(400,300);

//实例化一个按钮，父窗口为w，并设置按钮上的文字

btn_count=newQPushButton(this);

btn_count->setText(tr("计算"));

//实例化一个标签，父窗口为w，并设置标签上的文字

radiusLabel_text=newQLabel(this);

radiusLabel_text->setText("半径：");

//实例化一个标签，父窗口为w，并设置标签上的文字

areaLabel_text=newQLabel(this);

areaLabel_text->setText("面积：");

//实例化一个标签，父窗口为w

areaLabel_output=newQLabel(this);

//实例化一个输入栏，父窗口为w

radiusLineEdit_input=newQLineEdit;

//布局

QGridLayout*mainLayout=newQGridLayout(this);

//0行0列开始，占1行1列

mainLayout->addWidget(radiusLabel_text,,,1,1);

//0行1列开始，占1行2列

mainLayout->addWidget(radiusLineEdit_input,,1,1,2);

//0行3列开始，占1行1列

mainLayout->addWidget(areaLabel_text,,3,1,1);

//0行4列开始，占1行2列

mainLayout->addWidget(areaLabel_output,,4,1,2);

//1行4列开始，占1行1列

mainLayout->addWidget(btn_count,1,4,1,1);

connect(radiusLineEdit_input,SIGNAL(textChanged(QString)),this,SLOT(showArea()));

}

（四）Qt布局管理器的简单介绍

在设计GUI用户界面时，需要使用Qt的布局管理器进行控件的布局。

1、QGridLayout*mainLayout=newQGridLayout(this);

创建一个网格布局管理器对象mainLayout，并用this指出父窗口；

2、mainLayout->addWidget(…);

分别将控件对象radiusLabel_text、radiusLineEdit_input、areaLabel_text等放置在该管理器中；

3、还可以在创建布局管理器对象时不必指明父窗口。

转载请注明出处！微信公众号：依法编程

QWidget::setLayout(...)，将布局管理器添加到对应的窗口部件对象中。因为这里的主窗口就是父窗口，所以直接调用setLayout(mainLayout)即可。

（五）编写计算圆面积代码

同样适用两种触发不同控件的方式完成计算圆面积的功能。

1、方式一：通过触发按钮事件完成计算

（1）在头文件中添加槽函数声明

privateslots:

voidshowArea();

（2）在源文件中添加槽函数定义

//点击按钮槽函数

voidDialog::showArea()

{

boolok;

QStringtempString;

//获取半径值，字符串

QStringradiu_value=this->radiusLineEdit_input->text();

//字符串转为数值

intradiu_Int=radiu_value.toInt(&ok);

//计算圆面积

doublearea=PI*radiu_Int*radiu_Int;

//数值转为字符串并显示

this->areaLabel_output->setText(tempString.setNum(area));

}

注意在该文件头部添加conststaticdoublePI=3.1416;

（3）在构造函数中添加connect连接信号与槽

connect(btn_count,SIGNAL(clicked(bool)),this,SLOT(showArea()));

2、方式二：通过触发输入编辑框事件完成

在LineEdit文本框中输入所需圆的半径值后，不必单击“计算”按钮，直接在areaLabel_output中显示圆的面积值。操作步骤和方式一相同，只是在上述第（3）步骤中，添加的代码修改为如下：

connect(radiusLineEdit_input,SIGNAL(textChanged(QString)),this,SLOT(showArea()));

基本的Qt开发步骤介绍完成，下一个笔记将梳理一下之前笔记中用到的窗口部件，整理一下之前用到的QLabel、QLineEdit、QPushButton等部件，以及QWidget、QMainWindow、QDialog三种顶层窗口相关内容，使用Qt的帮助查询我需要的函数等信息，通过QDebug进行调试程序。

希望大家多多转发分享！谢谢！