前言:
此时我们对“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