基本概念

qml可以使用JavaScript完成一些动画的功能，其中可以写一个Js文件，并且导入，这样可以让程序结构更加清晰；

但这个JavaScript和web版的JavaScript区别还是很大的。

代码及演示

效果如下：

程序结构如下：

main.cpp


import QtQuick 2.9
import QtQuick.Window 2.2
import "Test.js" as TestWindow {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle{id: rectanglewidth: 100height: 100anchors.left: parent.leftanchors.leftMargin: - width / 2color: "gray"radius: widthTriangle {anchors.centerIn: parent}//定时器Timer {id: showTimerinterval: 10repeat: truetriggeredOnStart: trueonTriggered: {console.debug(rectangle.anchors.leftMargin)if(rectangle.anchors.leftMargin >= 0){console.debug("show over")showTimer.stop()}else{Test.showPic(rectangle)}}}Timer {id : hideTimerinterval: 10repeat: truetriggeredOnStart: trueonTriggered: {console.debug(rectangle.anchors.leftMargin)if(rectangle.anchors.leftMargin < -50){console.debug("hide over")hideTimer.stop()}else{Test.hidePic(rectangle)}}}MouseArea {width: parent.widthheight: parent.heightonEntered: {if(rectangle.anchors.leftMargin === 0){hideTimer.start()}else{showTimer.start()}}}}}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import "Test.js" as TestWindow {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle{id: rectanglewidth: 100height: 100anchors.left: parent.leftanchors.leftMargin: - width / 2color: "gray"radius: widthTriangle {anchors.centerIn: parent}//定时器Timer {id: showTimerinterval: 10repeat: truetriggeredOnStart: trueonTriggered: {console.debug(rectangle.anchors.leftMargin)if(rectangle.anchors.leftMargin >= 0){console.debug("show over")showTimer.stop()}else{Test.showPic(rectangle)}}}Timer {id : hideTimerinterval: 10repeat: truetriggeredOnStart: trueonTriggered: {console.debug(rectangle.anchors.leftMargin)if(rectangle.anchors.leftMargin < -50){console.debug("hide over")hideTimer.stop()}else{Test.hidePic(rectangle)}}}MouseArea {width: parent.widthheight: parent.heightonEntered: {if(rectangle.anchors.leftMargin === 0){hideTimer.start()}else{showTimer.start()}}}}}

Test.js

function showPic(item) {item.anchors.leftMargin = item.anchors.leftMargin + 1
}function hidePic(item) {item.anchors.leftMargin = item.anchors.leftMargin - 1
}

Triangle.qml

import QtQuick 2.5Canvas {id: triangleproperty color triangleColor: "blue"width: parent.width - parent.width / 3height: parent.height -  parent.height / 3contextType: "2d"onPaint: {context.lineWidth = 0context.strokeStyle = "#00000000"context.fillStyle = triangleColorcontext.beginPath();context.moveTo(0, 0)context.lineTo(0, triangle.height);context.lineTo(triangle.width, triangle.height/2);context.closePath();context.fill()context.stroke();}
}

源码打包下载

https://github.com/fengfanchen/Qt/tree/master/JavaScript%20Of%20QML%20Slide

QML工作笔记-仿前端滑出界面（JavaScript）相关推荐

javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签路径 7.表格 8.i ...
QML工作笔记-界面登录框设置（方便其他控件居中）
目录效果及演示伪代码效果及演示这个功能十分有用,并且常用,在此记录下! 如下效果: 下面的图我不再截全了.这个框只是方便开发者看,现在把框去掉! 如果不想让其透明,可以转换为这样的效果: 很丑 ...
Qt工作笔记-仿QQ登录界面（换肤，切换语言）
本程序含有资源文件,和QSS,在此博文不在展示. 源码下载地址: https://download.csdn.net/download/qq78442761/10389816 程序运行截图如下: 本程 ...
QML工作笔记-2种输入框的使用（TextField与TextInput）
目录演示代码演示这里如下图,上个的那个是TextField,下面的那个是TextInput加一个Rectangle 其中上面那个蓝框包着的就是TextField,下面那个是TextInput ...
QML工作笔记-Key Element的使用
目录基本概念演示及代码源码打包下载基本概念 Key允许按键,这个比QGraphics框架好用多了,开发起来真的是快. 演示及代码演示运行截图如下: 程序结构如下: 源码如下: main.cp ...
QML工作笔记-NumberAnimation、RotationAnimation、Timer综合使用
目录例子及演示打包下载例子及演示运行截图如下: git图如下: 程序结构如下: 源码如下: main.cpp #include <QGuiApplication> #include ...
QML工作笔记-为TestField戴上皮肤
目录基本概念代码及演示源码打包下载基本概念以目前的技术累计来说,有3种方式进行美化! 1. 修改TextField本生的属性: 2. 加上TextFieldStyle进行美化: 3. 在Te ...
QML工作笔记-为PushButton戴上皮肤
目录基本概念博主例子源码打包下载基本概念以前写过一个PushButton的基本用法,链接如下: https://blog.csdn.net/qq78442761/article/detail ...
QML工作笔记-PC端和Android端布局错位问题
目录问题演示解决办法问题演示比如如下的程序,在PC端运行: 而在Android端: 可见有如下的问题.造成这个原因可以是两平台的差异.得手动调整Android端的布局解决办法参考我以前的这 ...

QML工作笔记-仿前端滑出界面（JavaScript）

基本概念

代码及演示

源码打包下载

QML工作笔记-仿前端滑出界面（JavaScript）相关推荐

最新文章

热门文章