QML
IT1995
每周个人笔记分享,欢迎广大网友查阅!
展开
-
Web&QML笔记-qml获取canvas中元素是否被按下
以前出了几个用QWebView,获取html前端数据的博文,使用QWebElement可以直接获取html中元素的填充的值。在此不在多提。这个是纯QML获取canvas中元素是否被按下的思路。这里先演示下程序运行截图如下:点击按钮生成两个元素:点一下第一个红色矩形元素:点一下第二个红色矩形元素:其原理就是qml按钮调用web前端函数,构造出2个canvas矩形。然后web前端还提供了一个函数,这个函数用于查询这个按钮是否被按下,下面这个例子是使用ma.原创 2020-07-08 08:38:14 · 1021 阅读 · 0 评论 -
Qt工作笔记-WebEngineView调用web站点中的JS脚本(含Vue Cli脚本)
首先是一个例子,网页结构如下:代码如下:index.html<html><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><head></head><body><h1>Hello World</h1><script type="text/javascript" src="js.js"></sc原创 2020-06-23 13:04:05 · 2740 阅读 · 0 评论 -
Qt文档阅读笔记-ToolBar QML Type
ToolBar主要用于应用程序的上下文控制,就像导航按钮和搜索按钮那样。ToolBar就像窗口程序的header或footer那样。ToolBar不提供自己的布局,不过需要开发者设置内容,如创建一个RowLayout。但设置了一个item在ToolBar上时,ToolBar会自己适应这个item的大小。下面是官方的截图:代码如下: ApplicationWindow { ...原创 2020-04-04 21:50:16 · 5610 阅读 · 0 评论 -
QML笔记-整合C++及单例模式管理QML中控件
这里两个Integrate标题的界面是widgets界面,HelloWorld标题的界面是QML界面程序运行截图如下:点击获取QML中的值后:点击设置QML中的值后这里关闭窗口,整合的C++类也会自动析构(Qt真是强大)目前官网给出的要整合C++的,需要Qt5.7以上的版本。使用Q_PROPERTY宏可以被QML控件直接读取,访问如下:...原创 2020-01-19 15:34:25 · 5640 阅读 · 6 评论 -
QML笔记-2种方式实现心脏跳动
程序运行截图如下:随着时间,心脏会放大和缩小:这里大逻辑如下:把心图片先放大,然后在缩小。先放大又分为使用Sacle进行放缩,或者使用transform进行放缩关键代码如下:import QtQuick 2.5import QtQuick.Window 2.2Window { visible: true width: 640 ...原创 2020-01-19 10:02:29 · 5070 阅读 · 7 评论 -
QML笔记-使用connect界面数据交互(qml中Designer使用)
程序运行截图如下:点击右边的sender左边会接收到数据:多次点击后:这里关键是记录两点:1.是qml界面不同控件数据的传输2.使用设计器完成简单的qml控件设计先来记录下qml中Designer的简单使用,这个比较简单。新建文件的时候选择这个即可:创建好后会有2个文件:一个是XXXX.qml一个是XXXXForm.ui....原创 2020-01-17 08:56:39 · 7442 阅读 · 0 评论 -
Qt文档阅读笔记-Qt Quick Examples - Text 初步解析
目录HelloFontsAvailable FontsBannerImg TagText LayoutHelloHello展示了改变字间距和动态展示。使用连续的动画,font.LetterSpacing属性设置,3秒把此属性从0变化到50,并且随机显示在屏幕任意位置。 SequentialAnimation...原创 2019-10-13 12:45:01 · 4468 阅读 · 0 评论 -
QML笔记-键盘事件中同时响应onDigitXXPressed与onPressed
目录背景代码及演示背景在Keys.onDigitXXPressed信号与Keys.onPressed信号同时存在的时候,默认情况下往往只会触发Keys.onDigitXXPressed信号。这里关键是Keys.accepted这个属性,在特殊信号onDigitalXXPressed中设置为false,默认是true,即可响应Keys.onPressed信号。...原创 2019-06-05 10:05:49 · 4888 阅读 · 0 评论 -
QML笔记-KeyNavigation的使用(2种例子)
目录基本概念代码与实例基本概念KeyNavigation,有4个方法,一个是left,一个是down,up和right。分别表示键盘的上下左右。可以通过上下按键,切换输入框。代码与实例运行截图如下:运行截图如下:代码如下:import QtQuick 2.9import QtQuick.Window 2.2Window {...原创 2019-06-05 23:56:32 · 5765 阅读 · 1 评论 -
QML笔记-JavaScript在QML中的使用(直接调用和间接调用)
目录基本概念代码与实例基本概念ECMA-Script ES5 1. ECMA-Script ES5适用于编写QML应用程序。 2. 这个与在浏览器里面额JavaScript不同。 3. 没有提供DOM相关的API 4. ES5提供了对内访问类型,如Object,Array,Ma...原创 2019-06-06 14:07:43 · 6207 阅读 · 0 评论 -
QML笔记-自定义控件的2种点击方式(推荐第二种)
目录基本概念代码及演示基本概念自定义的时候,可以使用信号进行响应,也可以使用自带的onClicked进行操作。代码及演示运行截图都如下:程序结构都如下:第一种方法:main.qmlimport QtQuick 2.9import QtQuick.Window 2.2Window { visible: ...原创 2019-06-03 11:07:58 · 5157 阅读 · 0 评论 -
QML笔记-对QML中信号与槽的基本认识
目录基本概念演示及实例基本概念首先是信号的声明,如下:Rectangle{ id: rectangleId signal greet(string message) ...}当声明一个信号后会自动生成一个on<SignalName>这个槽函数(这种是JavaScript代码)使用下面的方式也可以关联信号...原创 2019-06-03 16:44:11 · 6315 阅读 · 1 评论 -
QML笔记-对QML中信号与槽的进一步认识
目录基本概念代码及实例基本概念通常情况下,使用自定义控件(多个形状进行组合),要使用信号与槽进行关联,一般出现这种情况,都会采用JavaScript代码进关联。代码及实例如下这个例子,Notifier和Receiver实现了关联。运行截图如下:当数据增加后:点击左边,右边也会跟着变。关键就是利用到了这个: C...原创 2019-06-04 08:35:27 · 5156 阅读 · 1 评论 -
QML笔记-TextEdit的使用
目录基本概念代码与实例基本概念一般在TextEdit上套一个Flickable使其具有滑动效果。再把TextEdit中wrapMode设置为TextEdit.Wrap,使其不在一行。并且把textFormat设置为TextEdit.RichText,使其能显示富文本。代码与实例程序运行截图如下:这里富文本框有滑动的效果。点击...原创 2019-06-04 23:11:12 · 8647 阅读 · 0 评论 -
Qt文档阅读笔记-GridLayout QML Type解析与实例
目录基本概念代码与实例基本概念如果QGridLaout大小被调整,所有item的布局都将会重新排列。和widget的QGridLayout一样。如果想要一行或一列的布局可以使用RowLayout和ColumnLayout。如果指定了columns这个属性,他会限制列的大小。 GridLayout { id: grid column...原创 2019-06-23 10:33:36 · 4993 阅读 · 2 评论 -
Qt3D文档阅读笔记-Qt3D老版本知识点及使用新版本的运行
目录前言老版本新版本前言使用Qt提供的API好处,无需知道3D架构方面的知识,以及OpenGL在桌面应用程序是如何跑起来的,及OpenGL中管道的使用。官方推荐在写2D,3D混写程序的时候,使用Qt Quick框架,这样会简单(个人觉得原因就是Qt Quick框架就是基于OpenGL的)官方给的这套教程全是基于QML语言的,里面无C++代码。这里还要部分O...原创 2019-09-22 14:16:47 · 4957 阅读 · 0 评论 -
QML工作笔记-使用QML中的Date将时间戳和指定格式时间互转
目录背景代码及演示补充背景这个功能非常有用,经常用到,今天查了大半个小时的文档才弄出来,特意记录下,方便以前进行快速查阅,开发。代码及演示程序运行截图如下:源码如下:import QtQuick 2.9import QtQml 2.2import QtQuick.Window 2.2Window { visible:...原创 2019-05-28 10:56:13 · 11611 阅读 · 0 评论 -
QML笔记-QML基本数据类型的使用
目录基本概念举个栗子基本概念这里的数据类型不仅仅有C++里面的int,String等,还有个很有特点的类型var,这个又可以放数组,也可以放函数,也可以混着换,很少有趣。举个栗子程序运行截图如下:后台打印如下:源码如下:import QtQuick 2.9import QtQuick.Window 2.2Wi...原创 2019-05-27 15:24:46 · 7650 阅读 · 0 评论 -
QML笔记-在背景图中添加NumberAnimation使得界面效果更佳(小技巧)
目录背景代码及演示要注意的问题背景最近在读官方的QML的例子,发现这个小技巧,可以带来更多的用户体验。真的很有用,在此记录下!代码及演示先来张静态图吧:程序运行截图如下:这里让背景旋转起来,使视觉上,更加带来冲击。关键代码如下:import QtQuick 2.9import QtQuick.Window 2.2W...原创 2019-05-17 16:15:25 · 5194 阅读 · 2 评论 -
QML工作笔记-为PushButton戴上皮肤
目录基本概念博主例子源码打包下载基本概念以前写过一个PushButton的基本用法,链接如下:https://blog.csdn.net/qq78442761/article/details/86261433但很丑。就像男人一样,不愿意找很丑的菇凉。这里有几种方法,一种是自定义,就和widgets的一样,搞几个图片,自定义一下,还是很灵活的。一...原创 2019-05-08 14:29:03 · 4680 阅读 · 2 评论 -
QML工作笔记-Key Element的使用
目录基本概念演示及代码源码打包下载基本概念Key允许按键,这个比QGraphics框架好用多了,开发起来真的是快。演示及代码演示运行截图如下:程序结构如下:源码如下:main.cpp#include <QGuiApplication>#include <QQmlApplicationEngine>...原创 2019-05-14 09:18:59 · 4279 阅读 · 0 评论 -
QML工作笔记-仿前端滑出界面(JavaScript)
目录基本概念代码及演示源码打包下载基本概念qml可以使用JavaScript完成一些动画的功能,其中可以写一个Js文件,并且导入,这样可以让程序结构更加清晰;但这个JavaScript和web版的JavaScript区别还是很大的。代码及演示效果如下:程序结构如下:main.cppimport QtQuick 2.9import...原创 2019-05-09 14:43:34 · 4925 阅读 · 2 评论 -
QML工作笔记-Image中fillMode的使用
目录基本概念博主例子(伪代码)基本概念这个功能非常常用,特意写一篇博文用于记录,方便自己以后快速查阅。上次申请CSDN专家失败了,原因是CSDN说我这个是以功能点为主,缺乏综合实战!我就是喜欢以功能点为主,方便自己查阅!Image.Stretch:图片拉伸自适应;(默认的)Image.PreserveAspectFit:按比例缩放,不裁剪Imag...原创 2019-05-06 21:25:06 · 8686 阅读 · 0 评论 -
QML工作笔记-在Row布局中如何进行稍许移动(图片Row布局会遇到)
目录演示效果伪代码演示效果意思就是如何把这样的效果:改成:这里并不是把 修仙 上移了,而是把 九州 和 大陆 下移了这样的效果!伪代码修改后的代码如下: Row { id: topRow anchors{ top: parent.top to...原创 2019-05-06 22:17:56 · 4649 阅读 · 0 评论 -
QML工作笔记-2种输入框的使用(TextField与TextInput)
目录演示代码演示这里如下图,上个的那个是TextField,下面的那个是TextInput加一个Rectangle其中上面那个蓝框包着的就是TextField,下面那个是TextInput这里的最大区别就是如下,当数据很长的时候,是这样的从中可以看到,使用TextInput他的范围可能会出Rectangle的范围,但是这种的比较灵活,可以...原创 2019-05-06 23:47:20 · 12743 阅读 · 5 评论 -
QML工作笔记-文本输入设置长度以及回显方式(TextInput与TextField通用)
目录基本概念代码及演示基本概念这是一个很常用到的功能,特意记录下:一般输入框会用到2个,一个是TextInput一个是TextField。因为TextInput加Rectangle如果太长会出现一种问题,就是Text会输入到Rectangle外面。可以用TextField代替,也可以限制其长度!TextInput和TextField中都含有一...原创 2019-05-07 09:23:45 · 9358 阅读 · 0 评论 -
QML工作笔记-界面登录框设置(方便其他控件居中)
目录效果及演示伪代码效果及演示这个功能十分有用,并且常用,在此记录下!如下效果:下面的图我不再截全了。这个框只是方便开发者看,现在把框去掉!如果不想让其透明,可以转换为这样的效果:很丑对吧,如果是有底纹的贴图就不会这样了。再添加一点透明度:如果要实现底部是半透明的,控件不透明也是很简单的。把重复的2个Rectangle放...原创 2019-05-07 09:59:35 · 5511 阅读 · 0 评论 -
QML工作笔记-PC端和Android端布局错位问题
目录问题演示解决办法问题演示比如如下的程序,在PC端运行:而在Android端:可见有如下的问题。造成这个原因可以是两平台的差异。得手动调整Android端的布局解决办法参考我以前的这套博文:https://blog.csdn.net/qq78442761/article/details/89892836这里把代码修改成...原创 2019-05-07 11:22:17 · 4540 阅读 · 0 评论 -
QML笔记-Particle的基本使用(粒子系统的基本使用)
目录基本概念博主例子源码打包下载基本概念粒子系统(ParticleSystem)- 管理发射器之间的共享时间线。发射器(Emitter)- 向系统中发射逻辑粒子。粒子画笔(ParticlePainter)- 实现粒子可视化。其中下面的ParticlePainter是ImageParticle,他是ParticlePainter的子类每一个例子系...原创 2019-05-20 08:52:50 · 5117 阅读 · 1 评论 -
QML工作笔记-为TestField戴上皮肤
目录基本概念代码及演示源码打包下载基本概念以目前的技术累计来说,有3种方式进行美化! 1. 修改TextField本生的属性; 2. 加上TextFieldStyle进行美化; 3. 在TextInput自定义一个背景;把这3种方法结合起来,可以做出很有意思的效果,如下所示代码及演...原创 2019-05-10 10:45:14 · 4545 阅读 · 1 评论 -
QML笔记-4中方式运行qml文件
目录使用QQmlApplicationEngine运行qml使用qml工具运行使用qmlScene工具运行qml文件使用QtQuick Prototype运行qml文件使用QQmlApplicationEngine运行qml程序结构如下:源码如下:main.cpp#include <QGuiApplication>#in...原创 2019-05-25 19:41:10 · 6502 阅读 · 0 评论 -
QML工作笔记-NumberAnimation、RotationAnimation、Timer综合使用
目录例子及演示打包下载例子及演示运行截图如下:git图如下:程序结构如下:源码如下:main.cpp#include <QGuiApplication>#include <QQmlApplicationEngine>int main(int argc, char *argv[]){ QCoreAp...原创 2019-05-13 13:57:35 · 4852 阅读 · 2 评论 -
Qt文档阅读笔记-RadioButton的基本使用
目录基本概念博主例子源码打包下载基本概念这里我只是把读到的东西做成一个小笔记,本来不想做的,因为太简单,但是在自己写例子的时候,发现这个RaidoButton只要放到一起,就会成为一组,根本不需要使用ButtonGroup这些去做;下面来看看详细的代码。博主例子程序运行截图如下:程序结构如下:源码如下:main.cpp#...原创 2019-05-22 16:27:44 · 5943 阅读 · 0 评论 -
QML笔记-QML中SpriteSequence及Sprite的基本使用
目录背景基本概念博主例子源码打包下载背景最近在研究一个稍微复杂的QML官方例子,里面有个SpriteSequence及Sprite知识点,我从来没有用过,这次特意花时间提取了出来,方便以后进行查阅。这个东西用来写游戏,或者xx软件的背景,或者xx动态效果,贼吉尔6!!!基本概念SpriteSequence及Sprite,用法和前端差不多,这里我只说...原创 2019-05-17 14:45:23 · 5317 阅读 · 2 评论 -
Qt杂记-QQuick之Android隐藏状态栏以及状态栏透明(QQuick项目)
目录基本概念默认情况,显示状态栏去掉状态栏设置状态栏透明基本概念一般用Qt开发Android使用QML语言,采用QQuick框架。没什么原因吧!估计就是开发起来比较爽!下面对这几种情况说明下!默认情况,显示状态栏效果如下:这里建立好项目后直接跑就可以了!去掉状态栏效果如下:把Debug或Release目录下...原创 2019-05-05 16:52:36 · 5968 阅读 · 0 评论