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

對(duì)屬性值使用 JavaScript 表達(dá)式

JavaScript 表達(dá)式可以在 QML 中用作綁定，例如：

Item {
width: Math.random()
height: width < 100 ? 100 : (width + 50) / 2
}

請(qǐng)注意，函數(shù)調(diào)用，如 Math.random()，不會(huì)被重新評(píng)估，除非它們的參數(shù)發(fā)生變化。 所以綁定到 Math.random() 將是一個(gè)隨機(jī)數(shù)并且不會(huì)重新計(jì)算，但如果寬度以其他方式改變，高度綁定將被重新計(jì)算以考慮到這一點(diǎn)。

在QML中添加JavaScript函數(shù)

可以在QML項(xiàng)目上聲明JavaScript函數(shù)，如下例所示，這允許您使用項(xiàng)目ID調(diào)用該方法。

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 文件中抽象出邏輯。 為此，首先將您的函數(shù)放入 .js 文件中，如示例所示。

// myscript.js
function getRandom(previousValue) {
return Math.floor(previousValue + Math.random() * 90) % 360;
}

然后將該文件導(dǎo)入到任何需要使用這些函數(shù)的 .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技術(shù)的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類(lèi)圖表組件：是一個(gè)C ++庫(kù)，代表一組控件，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網(wǎng)格組件：提供了一套完整的標(biāo)準(zhǔn) QTableView 函數(shù)和傳統(tǒng)組件無(wú)法實(shí)現(xiàn)的獨(dú)特功能。使您能夠?qū)⒉煌瑏?lái)源的各類(lèi)數(shù)據(jù)加載到一個(gè)快速、靈活且功能強(qiáng)大的可編輯網(wǎng)格中，支持排序、分組、報(bào)告、創(chuàng)建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanNavigation：QtitanNavigationDesignUI 組件是一組 GUI 控件，它實(shí)現(xiàn)了菜單、導(dǎo)航框、命令欄等導(dǎo)航界面，并讓您以更少的滾動(dòng)和點(diǎn)擊次數(shù)有效地查看所有實(shí)體（工作區(qū)、網(wǎng)格或其他項(xiàng)目）。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應(yīng)用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍(lán)色調(diào)色板完全支持 Visual Studio 2019 主題！

Qt技術(shù)交流群：166830288      歡迎一起進(jìn)群討論