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进行调试程序。

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180803A0ABTI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券