目錄

?

基本概念

代碼及演示

源碼打包下載

---

基本概念

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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。