JavaScript 代码可以很容易地集成到 QML 中,以提供 UI 逻辑、命令式控制或其他。
对属性值使用 JavaScript 表达式
JavaScript 表达式可以在 QML 中用作绑定,例如:
Item {
width: Math.random()
height: width < 100 ? 100 : (width + 50) / 2
}
请注意,函数调用,如 Math.random(),不会被重新评估,除非它们的参数发生变化。 所以绑定到 Math.random() 将是一个随机数并且不会重新计算,但如果宽度以其他方式改变,高度绑定将被重新计算以考虑到这一点。
在QML中添加JavaScript函数
可以在QML项目上声明JavaScript函数,如下例所示,这允许您使用项目ID调用该方法。
import QtQuick
Item {
id: container
width: 320
height: 480
function randomNumber() {
return Math.random() * 360;
}
function getNumber() {
return container.randomNumber();
}
TapHandler {
// This line uses the JS function from the item
onTapped: rectangle.rotation = container.getNumber();
}
Rectangle {
color: "#272822"
width: 320
height: 480
}
Rectangle {
id: rectangle
anchors.centerIn: parent
width: 160
height: 160
color: "green"
Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } }
}
}
使用 JavaScript 文件
JavaScript 文件可用于从 QML 文件中抽象出逻辑。 为此,首先将您的函数放入 .js 文件中,如示例所示。
// myscript.js
function getRandom(previousValue) {
return Math.floor(previousValue + Math.random() * 90) % 360;
}
然后将该文件导入到任何需要使用这些函数的 .qml 文件中,例如下面的示例 QML 文件。
import QtQuick
import "myscript.js" as Logic
Item {
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
TapHandler {
// This line uses the JS function from the separate JS file
onTapped: rectangle.rotation = Logic.getRandom(rectangle.rotation);
}
Rectangle {
id: rectangle
anchors.centerIn: parent
width: 160
height: 160
color: "green"
Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } }
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/e4661d64283f5593ec5d0ed2530b345d.png)
Qt商用组件推荐
- QtitanRibbon - Ribbon UI组件:是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,QtitanRibbon致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
- QtitanChart - Qt类图表组件:是一个C ++库,代表一组控件,这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。
- QtitanDataGrid - Qt网格组件:提供了一套完整的标准 QTableView 函数和传统组件无法实现的独特功能。使您能够将不同来源的各类数据加载到一个快速、灵活且功能强大的可编辑网格中,支持排序、分组、报告、创建带状列、拖放按钮和许多其他方便的功能。
- QtitanNavigation:QtitanNavigationDesignUI 组件是一组 GUI 控件,它实现了菜单、导航框、命令栏等导航界面,并让您以更少的滚动和点击次数有效地查看所有实体(工作区、网格或其他项目)。
- QtitanDocking:允许您像 Visual Studio 一样为您的伟大应用程序配备可停靠面板和可停靠工具栏。黑色、白色、蓝色调色板完全支持 Visual Studio 2019 主题!
Qt技术交流群:166830288 欢迎一起进群讨论