C++图形用户界面开发框架Qt入门级教程 - 如何在QML中集成JS_C/C++_编程开发_程序员俱乐部

JavaScript 代码可以很容易地集成到 QML 中，以提供 UI 逻辑、命令式控制或其他。

对属性值使用 JavaScript 表达式

JavaScript 表达式可以在 QML 中用作绑定，例如：

?

class="prettyprint lang-js">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 } }
}

}

?

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??????欢迎一起进群讨论

更多Qt产品教程、下载、正版授权资讯，请点击获取