QML集成JavaScript

在QML中可以使用现有的QML元素来创建页面，但QML紧密的集成了必要的JavaScript。

但QML中使用JavaScript比较严格，在QML中不可以添加或修改JavaScript全局对象成员，这样可能会使用一个未经声明的变量。

 

内联JavaScript

一些小型的JavaScript函数可以和其他QML声明写在QML组件中。

Item{
        anchors.fill:parent
        id:item1
        function text1(){  //创建一个函数
            console.log("新的函数运行")
        }
        MouseArea{
            anchors.fill: parent
            onPressed:{
                item1.text1()
            }
        }
    }

使用JavaScript文件：

大量的JavaScript代码需要写在一个独立的文件中。使用import 来导入到QML中

新建一个Js文件：

 点击左上角新建文件，选择Qt中的JsFile 

输入完文件名后，在文件中添加以下代码：

在qml文件中导入Js文件：

导入JS文件格式：

import "name.js" as xxxx

name为文件名
xxxx为限定符，每一个JS文件的限定符必须唯一，限定符和JS之间是一对一映射

 导入JS文件：

import QtQuick 2.9
import "MyJS.js" as Logic //导入Js文件  Logic为访问Js文件的对象
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MouseArea{
        anchors.fill: parent
        onPressed:{
            Logic.func()//使用函数
        }
    }

}

 代码隐藏实施文件

       大多数JS文件被导入一个QML文件是有状态的，它们经常作为该QML文件的逻辑实现。这种情况下，为了使QML组件的实例有正确的行为，每一个实例都需要有JS对象和状态的一个独立的备份，导入JS文件时的默认行为时为每一个QML组件实例提供一个唯一的、独立的备份，JS代码和QML组件运行在相同的范围，因此可以访问和操作对象的声明属性。

无状态的JavaScript库 

如果JS文件中的函数只用来提供输入和计算输出，不会直接操作QML组件实例，这种可以把该文件设为无状态（以免每一个QML对象都有这些库的拷贝，造成资源浪费）

使用pragma来指明一个特定文件是无状态库。

• pragma必须在所有有效的代码之前
• .pragma 库文件无法直接访问 QML 组件实例对象或属性
• QML 值可以作为函数参数传递

JS文件： 

.pragma library
function func(x) {
    console.log(x)
}

 QML文件:

import QtQuick 2.9
import "MyJS.js" as Logic
import QtQuick.Window 2.2

Window {
    id:window1
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MouseArea{
        anchors.fill: parent
        onPressed:{
            Logic.func(window1.width)//传入window1的宽
        }
    }

}

从另一个JavaScript资源导入JavaScript

使用Qt.include()函数来导入其他文件，会将所有的函数 ，导入到当前的命名空间中（目前已逐渐被弃用）

使用Qt.include()函数导入

//myJs1.js

function func() {
    console.log("func函数")
}


//textJs.js

Qt.include("MyJS.js")//导入MyJs.js文档
function showText() {
    console.log("showText函数")
}


//qml
import QtQuick 2.9
import "textJs.js" as Logic //导入textJs.js文件
import QtQuick.Window 2.2

Window {
    id:window1
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MouseArea{
        anchors.fill: parent
        onPressed:{
            Logic.showText()//调用showText函数
            Logic.func()//调用func函数
        }
    }

}

在程序启动时运行JavaScript

有时需要在应用程序（或组件实例）启动时运行一些命令性代码。虽然将启动脚本作为全局代码包含在外部脚本文件中很诱人，但由于 QML 环境可能尚未完全建立，这可能会有严重的限制。例如，某些对象可能尚未创建，或者某些属性绑定可能尚未建立。

• 使用Component元素提供的onCompleted属性，可以用来在QML环境完全建立后切换到启动脚本代码的执行。
• 每次销毁时会发出一个destruction（）信号

Rectangle{
        function func1(){
            //一些操作
        }
        
        Component.onCompleted: {
            func1()
        }
    }

属性绑定和属性赋值

• QML中使用<属性：值>的方式来创建属性绑定 （绑定的话会跟着更新）
• JavaScript使用<属性=值>的方式创建属性赋值  （赋值的话不会自动更新）会破环绑定

属性绑定：

Rectangle {
        id:rect1
        width: 100
        height: 100
        focus: true
        color: "red"
        Keys.onSpacePressed: {
            rect1.width-=10
            rect1.height-=10
        }
    }
    Rectangle {
        id:rect2
        x:100
        width: rect1.width //绑定了rect1的宽
        height: rect1.height//绑定了rect1的高
        color: "blue"
    }

属性赋值：

具有绑定的属性会根据需要自动更新。但是，如果稍后从 JavaScript 语句为该属性分配静态值，则将删除绑定。

Rectangle {
        width: 100
        height: width * 2
        color: "red"
        focus: true
        Keys.onSpacePressed: {
            height = width * 3//会破坏绑定
            //height = Qt.binding(function() { return width * 3 })
        }
    }

 矩形的形状为：100  300

QML信号中的JavaScript

• 使用connect（）函数，将QML信号关联到JavaScript上
• 可以在信号处理函数中直接调用JavaScript函数

使用connect（）函数，将QML信号关联到JavaScript上： 

Rectangle {
        width: 100
        height: width * 2
        color: "red"
        focus: true
        MouseArea{
            anchors.fill:parent
            id:mouse1
        }
        Component.onCompleted: {
            mouse1.clicked.connect(Logic.showText)//关联到Javascript中
        }
    }

信号处理函数中直接调用JavaScript函数：

Rectangle {
        width: 100
        height: width * 2
        color: "red"
        focus: true
        MouseArea{
            anchors.fill:parent
            id:mouse1
            onPressed: {
                Logic.showText()//直接调用函数
            }
        }
    }

JavaScript在QML中的限制：

在文件中编写的JavaScript代码无法修改全局对象，在 QML 中，全局对象是常量 - 不能修改或删除现有属性，也不能创建新属性。

 违法操作：

a = 1;
for (var ii = 1; ii < 10; ++ii)
    a = a * ii;
console.log("Result: " + a);

但可以简单的修改为法典：

var a = 1;
for (var ii = 1; ii < 10; ++ii)
    a = a * ii;
console.log("Result: " + a);

全局代码在缩小的范围内可以使用 ，在启动期间，如果 QML 文件包含带有“全局”代码的外部 JavaScript 文件，则会在仅包含外部文件本身和全局对象的作用域中执行该文件。也就是说，它无法通常的访问 QML 对象和属性

 允许仅访问脚本局部变量的全局代码：

var colors = [ "red", "blue", "green", "orange", "purple" ];

 访问 QML 对象的全局代码将无法正常运行：

var initialPosition = { rootObject.x, rootObject.y }

 目前在QML中this值是未定义的，使用id访问

Item {
    width: 200; height: 100
    function mouseAreaClicked(area) {
        console.log("Clicked in area at: " + area.x + ", " + area.y);
    }
    MouseArea {
        id: area
        y: 50; height: 50; width: 200
        onClicked: mouseAreaClicked(area)
        //错误使用：
        //onClicked: mouseAreaClicked(this)
    }
}

 

参考文档：

Importing JavaScript Resources in QML | Qt QML 5.15.12