宁波高新区建设局网站,网站建设资料准备标准,Wordpress上传万网空间,郑州哪里教做网站学习目标
了解 qt 的基本信息了解 qt 的下载及安装了解创建一个基本 qt 项目的流程了解信号与槽通过示例了解信号与槽的设置与编写了解控件添加的方式了解控件如何使用代码获取其文本了解控件如何使用代码设置其文本使用 connect 自定义信号与槽了解使用样式修饰控件外观了解使…学习目标
了解 qt 的基本信息了解 qt 的下载及安装了解创建一个基本 qt 项目的流程了解信号与槽通过示例了解信号与槽的设置与编写了解控件添加的方式了解控件如何使用代码获取其文本了解控件如何使用代码设置其文本使用 connect 自定义信号与槽了解使用样式修饰控件外观了解使用代码清空控件文本学习使用Qt 编写一个四则算术计算器
注本章中使用的一些方法方法是为了简单的了解一下概念性质例如在多个槽函数时使用的方法并不是简便的简便的方法在之后的学习中将会进行讲解。
一、简单了解 Qt 及下载安装
1.1 简单了解 Qt
qt 是 C 的图形用户工具是一个跨平台的用户界面解决方案Qt 几乎支持所有的系统平台并且是面向对象的。
Qt 的跨平台是非常强大的例如可支持 win下的 XP、Vista、Win7/8/10 等 Windows 系统并且对于Linux 下 X11、HP-UX、BSD/OS 又或是 嵌入式 Linux 平台 等都是支持的甚至是 Mac 平台也支持。
1.2 Qt 下载及安装
Qt 分为商业版以及开源版在此我们使用开源版本开源版本是免费的。
Qt 开源版本的下载链接为 https://www.qt.io/download打开链接中往下滑动页面找到开源版本下载板块 点击后将会跳转到一个页面往下拉页面点击下载 qt 二进制在线安装 之后将会跳转到一个页面并且会根据你的系统推荐你使用某个版本 最后点击 Download 即可下载安装步骤操作简单不再赘述以上介绍开源版下载方式是因为部分同学认为Qt 是收费的所以在此介绍开源版的下载方法可能由于时间问题网页更新会导致下载“路径”不同。
1.3 项目示例
Qt 作为一款优秀的 GUI 解决方案许多经典流行的应用使用了 Qt 进行开发例如 WPS 谷歌地球 VirtualBox 虚拟机 Linux 桌面系统等。
二、Qt Creator 界面介绍 及 第一个Qt 程序创建
2.1 简单的第一个 qt 程序
Qt 界面中自带了很多项目示例可以通过 查看 Qt 示例学习经典项目的开发 Qt 自带了教程查看教程可以观看资料不过是英文的有英文能力的同学推荐阅读 点击创建项目将会弹出一个窗口选择对应的模板将会可以创建不同的项目 在以上所选择的模板中最右侧是对应的模板介绍 该模板是创建一个桌面 Qt 程序以及包含了一个用于设计的 Qt 窗口。
点击选择可以进入下一步在下一步窗口中选择项目名称以及对应项目存放的位置 在此需要注意名称和路径不能有中文接着一直下一步知道出现语言选择时在此你可以选择中文 接着一直下一步进行操作即可完成后将会弹出所创建的项目的基本内容 接着点击运行将会出现一个 空窗口 三、信号与槽
3.1 信号与槽的基本示例
信号在 Qt 中指的是一个事件例如当你点击一个按钮时会触发点击的事件也就是信号触发完毕后你需要某一个“动作”对其作出响应或者说当收到信号后将会执行一些动作而这个动作则是槽又或者说是一个对信号响应的代码块。
此时我们可以通过一个例子来简单的理解一下信号与槽的概念点击创建项目最后创建一个 Qt Widgets 的 App 应用 随后指定文件目录后一直点击下一步即可
接下来点击 mainwindow.ui 文件 点击之后将会出现一个设计窗口 这个窗口如图所示左侧是对应的基本空间区域右侧是对应的设计窗口。我们可以通过拖拽左侧的控件到右侧的设计窗口之上使当前 window 添加对应的控件例如 此时可以点击整个 Qt creator 左下角的运行按钮对整个项目编译运行 运行之后将会出现一个窗体程序这个窗体程序在界面之上有一个 pushbutton 为了实现信号与槽这个概念我们可以再拖拽一个 edit 控件到窗体之上由于一个 edit 是一个可编辑的控件那么必然是输入 input Widgets我们在 input Widgets 控件之下可以找到对应的 line Edit 此时拖拽这个控件到窗体之上 接着我们开始试验信号与槽。我们右键 PushButton将会出现跳转到槽的选择项 此时将会出现一个信号选择框我们可以选择在什么情况下触发这个槽函数 在这里选择 clicked 指在点击时触发这个槽函数。选择完毕后 qt creator 将会跳转窗口到一个编辑页此时编辑页中出现的 on_pushButton_clicked 则是点击 pushButton 按钮后将会跳转到的槽函数 那此时我们该在这里编写什么代码呢此时我们可以编写一些动作例如直接将当前按钮的文本改变成 lineEdit 空间所输入的文本那么就可以很好的演示当点击按钮后执行代码后界面所产生的反应。
此时我们可以编写代码
void MainWindow::on_pushButton_clicked(){QString inputTextui-lineEdit-text();ui-pushButton-setText(inputText);
}其中 QString inputTextui-lineEdit-text(); 表示新建一个 QString 类型的 inputText 变量用来获取对应输入框所输入的内容获取输入框需要指定到窗口上的某个空间我们需要通过 ui 进行获取ui- 指 ui 上的某个空间由于在窗体上的输入框名称默认为 lineEdit 所以直接写成 lineEdit 即可查看 控件名称 直接点击控件后可在 Qt creator 右上角进行查看 此时代码为 ui-lineEdit 表示指定到了某个元素而最后的 -text() 则表示获取当前控件的文本内容获取到文本内容后存储到 QString 类型的 inputText 变量即可。
此时已经获取到了对应的输入框内容那么接下来需要把对应输入框的文本设置到 pushButton 之上即可设置一个控件的文本也需要使用 ui 指定到某一个控件那么获取 PushButton 控件代码则是 ui-pushButton那么设置文本则是 setText 方法在 setText 方法中传入对应的文本值即可所以最终代码写成 ui-pushButton-setText(inputText);当然你可以直接写成 ui-pushButton-setText(ui-lineEdit-text());。
此时完成了代码编写后我们可以运行程序运行成功将会出现一个窗体界面此时在窗体界面中输入 233 接着点击 PushButton 按钮点击后 PushButton 按钮的文本将会改变成你所输入的值 3.2 自定义信号与槽
信号与槽不止可以通过默认方式进行生成和编写还可以通过自定义的方式自定义信号与指定处理的槽函数。
我们自定义的信号与槽是通过 connect 函数进行设置例如如下代码
connect(ui-lineEdit,SIGNAL(returnPressed()),this,SLOT(on_pushButton_clicked()));以上代码中 connect 函数接收的第一参数为你需要指定信号与槽的控件第二个参数则是表示发送什么信号就像我们在设计窗口中右键某一个控件随后通过鼠标点击指定对应的信号在这里 SIGNAL(returnPressed()) 中 SIGNAL 表示是一个宏函数需要传入对应的事件其 returnPressed 则表示是 enter 按下确认的事件接下来的 this 则是表示当前类处理这个信号最后一个则是槽SLOT 需要传入对应处理信号的函数即可。
由于自定义信号与槽的方式有很多种在这里先简单讲解一种之后其他的处理方式将会补充讲解。
最后我们点击运行随后在 lineEdit 中输入对应的文本enter 键后按钮也会发生其文本的改变 四、实现简单四则计算器
4.1 界面设计
在这一节中我们使用 qt 制作一个简单的四则运算器学习一下界面创建与修饰。
首先创建好项目其次打开 ui 文件进入到设计窗口之中 在一个计算机中数字的按键是必不可少的我们拖动对应的按钮到设计窗口之上最后点击按钮在右下角的属性设置之上改变其宽高 接着我们更改文本后按住键盘 ctrl 拖动控件将会直接复制出一个新的控件 接着我们拖动出多个对应的按钮并且更改其文本 此时我们发现这些按钮的排列并不整齐我们可以选中所有的按钮接着点击设计窗口顶部的栅格布局 点击之后整个按钮将会自动进行规整的排列。
接着我们点击右上角给每一个按钮起名方便我们接下来的调用 接着我们添加两个 eidt 到窗口之上并且设置号大小和位置 当然也要更好对应的控件名一个用于显示公式还有一个用于显示最终的计算结果 接着设置整个窗体大小的宽高 设置完毕后我们可以给这些控件对应的样式。
4.2 添加样式
首先我们可以给这些控件设置边框为 none 去掉对应的边框主要是把 edit 的边框去掉使其较为美观。右键在右上角的对象树上选择改变样式 接着在弹出来的样式表上添加样式修饰 *{border:none;background-color: rgb(234, 234, 234);
}其中 * 表示给所有的对象设置样式其样式编写在 * 之后的花括号之中border 设置为 none 表示边框为 none 则表示不需要边框background-color 表示设置对应的背景色用 rgb 色进行设置。输入完毕后点击应用当前的窗体如下 接着我们可以设置对应的 按钮样式例如设置 QPushButton 的背景色以及对应的字体大小、是否加粗以及字体可以使用以下样式
QPushButton{background-color: rgb(255, 255, 255);font:bold 11pt 微软雅黑;
}其 font:bold 11pt 微软雅黑; 表示设置字体bold 表示字体加粗11pt 表示字体的大小、最后则是对应的字体。
若此时我想对应的设置乘号、除号、加号、减号这些运算符号的不同则可以通过样式指定控件设置不一样的样式例如 QPushButton#add,#subtraction,#division,#multiplication{background-color: rgb(56, 208, 203);
}此时设置样式则需要先指定某个类型的组件随后使用 # 在末尾街上控件名称随后逗号分隔即可指定某个控件设置样式。
此时运行程序我们发现鼠标移动到某个按钮上时没有任何反应若想使按钮有反应则需要对应的设置 hover 时按钮的样式hover 则是指对应的鼠标悬浮上去后按钮发生的改变设置这个样式很简单只需要指定某个类型的控件后在其后使用一个冒号 :hover 即可指定一个样式例如
QPushButton:hover{background-color: rgb(221, 221, 221);border:1px solid rgb(185, 185, 185);
}此样式表示当鼠标移动上去后改变其对应的背景色以及边框颜色此时鼠标移动上去将会使按钮有反应并不会过于死板。
此时效果如下 但此时我们发现设置过指定控件的样式例如加减乘除并没有移动上去后发生样式改变这时需要再针对这些控件设置一下 hover 样式
QPushButton#add:hover,#subtraction:hover,#division:hover,#multiplication:hover{background-color: rgb(221, 221, 221);border:1px solid rgb(185, 185, 185);
}效果如下 4.3 功能设计
设计功能我们需要设置一个全局变量用于记录通过按钮生成的四则运算公式在此我们设置在头文件之中 接着我们给每个按钮手动设置一个槽函数 首先我们设置数字 7 按钮的槽函数
void MainWindow::on_btn7_clicked()
{expression7;ui-show-setText(expression);
}在这个槽函数中设置 expression 全局变量记录用户输入了7随后设置 show edit 的文本为 expression既然 expression 是用于对应的记录公式那么我们就可以把所有的数字都设置类似于数字 7 的形式往 expression 中添加对应的拼接并且加减乘除法按钮也要完成该操作 最后运行一下程序发现输入点击对应按钮后将会出现对应的公式 但是我们发现由于是 eidt 对象可以用户输入我们可以设置其 edit 的属性 readonly 为 true 即可 也可以设置对应的水平对齐为右 最后我们得到了这个公式我们只需要通过计算器代码即可求出对应值由于这是 C/C 的内容在此就不再赘述我们此时直接右键等于号设置其槽函数并且赋值以下代码即可代码来源于网络 QStack int OPND; // Operand stackQStack char OPTR; // Operator stackOPTR.push(#);//char ss[2]#;//尾部有\0char s[maxn];char path[50];QString str expression;QByteArray ba str.toLocal8Bit();memcpy(s,ba.data(),ba.size()1);//加1是为了最后的终结符否则转换回来的时候不知道什么时候截止QString str2;str2 QString::fromLocal8Bit(s);strcat(s,ss);// 运算式尾部加 #--结束运算符char cs[0];int k1;while(c!#||OPTR.top()!#){ //表达式未读完或者运算未完int y0;if(c0c9){while(c0c9){ // 读入连续的数字yy*10(c-0);cs[k];}OPND.push(y); // 把读进的数字入数字栈}else{switch(Procede(OPTR.top(),c)){case: //栈顶元素优先权低OPTR.push(c);cs[k];break;case:OPTR.pop(); // 脱括号cs[k]; // 读入下一个字符break;case: //退栈并将运算结果入栈char xOPTR.top();OPTR.pop();int mOPND.top();OPND.pop();int nOPND.top();OPND.pop();OPND.push(Operate(m,n,x));break;}}}ui-res-setText(QString::number(OPND.top()));当然你直接复制这个代码将会报错此时需要再复制几个函数以及添加头文件先复制几个函数
const int maxn110;
char priority[7][7]{{,,,,,,},{,,,,,,},{,,,,,,},{,,,,,,},{,,,,,,0}, // 此行()表示左右括号相遇括号内运算已完成{,,,,0,,},{,,,,,0,} // 表示整个表达式求值完毕}; // 0表示不可能出现这种情况 ( 语法错误 )//Precede 用于判断运算符栈栈顶运算符 a1 与读入运算符 a2 之间的优先关系函数
char Procede(char a,char b){ // 建立 pre[][] 到 运算符间的映射关系int i,j;switch(a){case:i0;break;case-:i1;break;case*:i2;break;case/:i3;break;case(:i4;break;case):i5;break;case#:i6;break; // # 是表达式的结束符}switch(b){case:j0;break;case-:j1;break;case*:j2;break;case/:j3;break;case(:j4;break;case):j5;break;case#:j6;break;}return priority[i][j];
}int Operate(int m,int n,char x){if(x)return mn;if(x-)return n-m;if(x*)return m*n;if(x/)return n/m;
}随后需要对应的添加一个头文件 QStack
#include QStack最后若你的命名跟我的不符你需要修改字符串转字符数组时的公式变量命名 以及最后显示值时指定改变某个控件 最终结果如下 总结
本章节主要介绍了 qt 的一些基本信息并且使用 qt 创建一个基本的项目了解 qt 项目创建的基本流程在此基础上学习了信号与槽并且使用了对应的小示例改变了按钮的文本在基础信号与槽的基础上通过 connect 实现了自定义的信号与槽指定完成了使用键盘响应对应的槽函数最后通过学习如何制作一个简单的四则运算程序在其中了解了 UI 界面的布局制作、限制其大小、以及设置对应的样式最终也实现了对应的按钮及计算。
