基于qt的页面开发入门学习笔记
目录
QT
简介:
- QT是是一个跨平台的 C++ 开发库,超多功能集合开发环境。一般用QT中的Qtcreater来设计GUI。涉及以下概念:
- GUI:图形用户界面(Graphical User Interface,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。
- 协议:网络协议的简称。为了使数据在网络上从源到达目的,网络通信的参与方必须遵循相同的规则,这套规则称为协议(protocol),它最终体现为在网络上传输的数据包的格式。
- IDE:集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。
- 设计语言:建议底层用C++做业务逻辑,上层用QML(一种脚本语言)做图形界面。也可以纯C++开发,但是做界面时会比较累。
QT采用GPL和LGPL协议
-
GPL协议的主要内容是只要在一个软件中使用("使用"指类库引用,修改后的代码或者衍生代码)GPL 协议的产品,则该软件产品必须也采用GPL协议,即必须也是开源和免费。这就是所谓的"传染性"。GPL协议的产品作为一个单独的产品使用没有任何问题,还可以享受免费的优势。
由于GPL严格要求使用了GPL类库的软件产品必须使用GPL协议,对于使用GPL协议的开源代码,商业软件或者对代码有保密要求的部门就不适合集成/采用作为类库和二次开发的基础。 -
LGPL 是GPL的一个为主要为类库使用设计的开源协议。和GPL要求任何使用/修改/衍生之GPL类库的的软件必须采用GPL协议不同。LGPL允许商业软件通过类库引用方式使用LGPL类库而不需要开源商业软件的代码。这使得采用LGPL协议的开源代码可以被商业软件作为类库引用并发布和销售。
但是如果修改LGPL协议的代码或者衍生,则所有修改的代码,涉及修改部分的额外代码和衍生的代码都必须采用LGPL协议。因此LGPL协议的开源代码很适合作为第三方类库被商业软件引用,但不适合希望以LGPL协议代码为基础,通过修改和衍生的方式做二次开发的商业软件采用。
其他名词:
- HTML: 是用来描述网页的一种语言。
- href :<a> 标签的 href 属性用于指定超链接目标的 URL。
- href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和JavaScript代码段。
- 片段标识符:URL中方带‘#’的右边部分称为片段标识符,表示资源内的某一位置。
- JavaScript:一种脚本语言。
- 如果用户选择了 <a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。
学习教材:
- 最好是直接用qt自带的 ‘帮助’里边的文档,是第一首资料,但是比较难读懂。
- 我还在b站学习有关知识,最主要是在csdn,不过csdn错误率会比较高,很多时候要自己debug。
静态编译与动态编译的区别:
- 静态编译就是在编译时,把所有模块都编译进可执行文件里,当启动这个可执行文件时,所有模块都被加载进来。
- 动态编译是将应用程序需要的模块都编译成动态链接库,启动程序(初始化)时,这些模块不会被加载,运行时用到哪个模块就调用哪个。
-
静态库
- 优点
- 代码的装载速度快,执行速度也比较快
- 缺点:
- 程序体积会相对大一些
- 如果静态库需要更新,程序需要重新编译
- 如果多个应用程序使用的话,会被装载多次,浪费内存。
- 优点
-
动态库
- 动态链接库:在应用程序启动的时候才会链接,所以,当用户的系统上没有该动态库时,应用程序就会运行失败。
- 优点:
多个应用程序可以使用同一个动态库,而不需要在磁盘上存储多个拷贝。 - 缺点:
由于是运行时加载,可能会影响程序的前期执行性能。
QT中的文件:
1. .pro文件(profile)是qt实现跨平台的核心部分,相当于各个平台生成不同makefile的媒介,可用qmake生成makefile(若无法使用qmake先执行’qmake -project’)
2. 在命令行模式下直接对源文件qmake和make后有时会有bug,要在build的文件里边运行。
3. Build有两种类型,一种是debug版本,一种是release版本,dubug版本会加入调试信息,所以文件会比release大很多。
Qtcreater:
- 特点:直接通过拖拽已有的挂件来直接设计界面。
- 位置:
- 如果只是单个控件需要控制 可以按ctrl+方向键进行控制,每次只会移动一个最小单位。
- 若需要多者精确排列 则要用代码来确定位置 如用resize来设置宽度和高度,用remove来移动位置(x,y),或者是setGeometry 来确定坐标(以左上角为原点做xy轴),挂件的坐标表示挂件左上角的位置。
- 另外 GUI提供的图形界面省去很多定义跟设置的代码,但是他不可能知道要怎么去按人的意愿处理用户信号,所以信号处理得自己来写代码。
- 还有GUI里边提供的挂件,要用到的话需要一个一个去学习,尽管很多东西是互通的,但是作为不同挂件,肯定有每个挂件特有的特点,比如textedit跟textbrowser,前者用户能编辑文本后者不能,又比如label跟lineedit 都用来显示文本的话,一个是透明的一个是有颜色的。
Qtexttospeech:
- Text-to-speech 即读出文字,以下是实现的方法:
- .h文件加上 #include<qtexttospeech>
- .pro文件中追加定义Qt :
Qt = core gui 改成 Qt += core gui texttospeech
#这里要注意的是跟头文件有一个q的区别。
- 再在头文件里边的private里边加上:
QTextToSpeech *x //说话的类
- 同时也要在界面的.cpp文件里边的申请界面函数里边加上:
x = new QTextToSpeech //构造一个说话的类
- 再在信号处理函数里边写上:
x->say(“要读的文字”);
- 当然了,这其中要输出的文字换成其他指定的文本,就能实现很多功能了,比如换成(ui->lineEdit->text())就能读出linedeit挂件中的文本。
但是我在自己的电脑上没办法运行,给出的原因是no text-to-speech plug-ins were found就是说我没有这个插件,找遍全网的方法都没找到解决方法,开发包工具包更新了也没有解决。qt卸载了重新下载安装也没有用,最后只能放弃咯。
QLabel设置超链接:
- 外部链接:
- 首先允许label打开外部链接:将openexternallinks改为ture。
- 再设置qlabel中的文本:ui->label->setText(“<a href=网址>QLabel”)。
- 其中网址换成链接处的网址,标记的qlabel是显示的链接的名字。
- 本地文件:
- 比如要实现点击就显示图像,图像要显示在label上就要用到qpixmap类,
- 首先要定义一个QPixmap的变量,如:QPixmap pix(“图片路径”)
- 其中图片路径换成真实图片路径,要注意的是这里的定义不是用’=’,而是加上了(),要跟c语言区别。
- 让label显示则:ui->label->setPixmap(pix);
- 还可以让qpixmap适应label的大小:
pix =pix.scaled(ui->label->size());
其他:
- 另外总结一下set***,当接受到信号后,要改变某个挂件的某个变量,大多数都是用set***,具体要set什么可以到设计界面右边的挂件参数查看。用这个方法就可以进行很多操作啦。
- 还有参数处理可以用if()来处理不同的发射信号,比如spinBox的value。
- 还有一个注意事项,在设置挂件处理信号函数是点击‘转到槽‘,这时有很多种信号处理函数,如果选择了一种,以后把函数删掉的时候会出现错误,原因是在创建这个函数的时候qt会在其他文件创建其他定义和变量,所以只是删除这个函数会有错误。
简易的图片阅读界面
先总体说一下这个界面有说明功能:
- 左上角的工具栏下拉有三个选项:
- start下左边不显示任何东西的
- 操作说明选项左边会显示下图的文本
- 更多选项会显示一个名为十二生肖的链接,点击后直接链接到百度百科的十二生肖。
2.右边显示十二生肖的图片,且每个图片对应一个编号,当编号改变时,图片也发生相应改变。
下面介绍如何制作图片阅读界面:
首先规划一下界面基本挂件组成和分布(自定义,按下边讲的几个挂件想怎么做就怎么做):
- Widget是刚开始创建project时候选择的基类。
- 左边的QLabel是透明的,用于显示提示信息文本,所以用虚线来表示,右边的QLabel用来显示图片,故用实线来表示。为了区分两个label分别取名QLabel_1和QLabel_2;
- QSpinBox用来选择图片编号,注意QSpinBox下端与QLabel平齐,用ctrl+方向键调整。
- QComboBox用来选择操作,位置与上框架对其,同样用ctrl+方向键调整。
接下来是每个挂件的设置:
- QComboBox+QLabel:
- 基本思路为用(ui->cpmboBox->currentText())表示读取当前选项,判断之后用一个字符串设置label中的text()为该字符串。
- 在设计界面的QComboBox里边添加三个选项”start”,”操作说明”,”更多”。
- 然后分别设置点击每个选项的时候会出现什么效果,在QComboBox的currentTextchange()槽函数里边输入下面代码:
1).“start”的时候什么都不显示:
- QString zero(””);
- If((ui->cpmboBox->currentText())==”start”){ui->label->setText(“zero”);}
2).“操作说明”的时候显示文本:
- QString text("十二生肖浏览界面 \n 右下角数字对应十二生肖图片 \n 另外点击‘更多’可以\n查找十二生肖更多故事哦!");
- if((ui->comboBox->currentText())=“操作说明"){ui->label_2->setText(text);}
//注意插入换行符,否则会显示成一行。
3.)“更多”的时候显示链接:
- QString text1("<a href=https://baike.baidu.com/item/%E5%8D%81%E4%BA%8C%E7%94%9F%E8%82%96/48593?fr=aladdin>十二生肖");
- if((ui->comboBox->currentText())=="更多"){ui->label_2->setText(text1);}
//蓝色部分是网址,绿色部分是链接显示的名字。
2.QSpinBox+QLabel:
- 基本思路是QSpinBox中的value改变为*时,QLabel的图片路径显示为***
- 先在设计界面将QSpinBox的值最小值设为1,最大值设为12;
- 再在QSpinBox的valuechange信号槽函数里边输入如下代码:
- QPixmap pix1("图片路径1"); //定义一个qpixmap类
- pix1= pix1.scaled(ui->label->size()); //调整图片适应label大小
- if(ui->spinBox->value()==(1)){ui->label->setPixmap(pix1);}
//设置该图片为label显示的图片
- QPixmap pix2("图片路径2"); //定义另一个qpixmap类
- pix2= pix2.scaled(ui->label->size()); //调整图片适应label大小
- if(ui->spinBox->value()==(2)){ui->label->setPixmap(pix2);}………
一直写到pix12即可。
至此,这个界面就完成啦。