龙空技术网

Qt编程进阶(51):QML导入JS文件

未来奇兵 276

前言:

此时我们对“qt dllimport”大致比较关切,咱们都需要知道一些“qt dllimport”的相关文章。那么小编在网上汇集了一些关于“qt dllimport””的相关知识,希望朋友们能喜欢,我们一起来学习一下吧!

JavaScript代码可以被很容易地集成进QML,来提供用户界面(UI)逻辑、必要的控制及其他用途。QML集成JavaScript有两种方式:一种是直接在QML代码中写JavaScript函数,然后调用;另一种是把JavaScript代码写在外部文件中,需要时用import语句导入qml源文件中使用。本文介绍如何导入JavaScript文件。

下面实例往QML源文件中导入外部JS文件来实现图形旋转,运行效果如下图。

具体实现步骤如下。

(1) 新建项目

新建QML应用程序,项目名称为“JSFile”。

(2) 新建JS文件

右击项目视图“Resources” 一 “qml.qrc”下的“/”节点,选择“Add New...”项,弹出“Add New”对话框,选择“Qt”下的“JS File”模板,如下图所示。

单击“Choose...”按钮,在“Location”页输入文件名“myscript”并选择保存路径(本项目文件夹下)。连续单击“下一步”按钮,最后单击“完成”按钮,就在项目中添加了一个js文件。

(3) 编写JS文件

在“myscript.js”中编写代码如下:

function getRandomNumber() { //定义 JavaScript 函数	return Math.random() * 360; //随机旋转的角度值}
(4) 新建自定义组件

右击项目视图“Resources” 一 “qml.qrc”下的“/”节点,选择“Add New...”项,新建“RotateRect.qml”文件,编写代码如下:

import QtQuick 2.0import "myscript.js" as Logic //导入 JS 文件Rectangle {  id: rect  width: 60  height: 60  gradient: Gradient { //渐变色增强旋转的视觉效果    GradientStop { position: 0.0; color: "yellow" }    GradientStop { position: 0.33; color: "blue" }    GradientStop { position: 1.0; color: "aqua" }  }  Behavior on rotation { //行为动画  RotationAnimation {  	direction: RotationAnimation.Clockwise  }  }  MouseArea {    anchors.fill: parent    onClicked: rect.rotation = Logic.getRandomNumber();    //使用导入JS文件中定义的JavaScript函数  }}
(5) 编写主程序

打开“main.qml”文件,编写代码如下:

import QtQuick 2.12import QtQuick.Window 2.12Window {  width: 160  height: 160  visible: true  title: qsTr("JSFile")  RotateRect { //使用 RotateRect 组件  	x:50;y:50  }}

当编写好一个JS文件后,其中定义的函数就可以在任何.qml文件中使用,只需在开头用一句import导入该JS文件即可,而在QML文档中无须再写JavaScript函数,这样就将QML的代码与JavaScript代码隔离开来。

在开发界面复杂、规模较大的QML程序时,一般都会将JavaScript函数写在独立的JS文件中,再在组件的.qml源文件中import (导入)使用这些函数以完成特定的功能逻辑,最后直接在主窗体UI界面上布局这些组件即可。大家在编程时应当有意识地采用这种方式,才能开发出结构清晰、易于维护的QML应用程序。

————————————————

觉得有用的话请关注点赞,谢谢您的支持!

对于本系列文章相关示例完整代码有需要的朋友,可关注并在评论区留言!

标签: #qt dllimport #小程序导入js