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

内联JavaScript

一些小型的JavaScript函…在QML中可以使用现有的QML元素来创建页面但QML紧密的集成了必要的JavaScript。

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

内联JavaScript

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

Item{anchors.fill:parentid:item1function

text1(){

//创建一个函数console.log(新的函数运行)}MouseArea{anchors.fill:

parentonPressed:{item1.text1()}}}

使用JavaScript文件

大量的JavaScript代码需要写在一个独立的文件中。

使用import

来导入到QML中

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

导入JS文件

parentonPressed:{Logic.func()//使用函数}}}代码隐藏实施文件

大多数JS文件被导入一个QML文件是有状态的它们经常作为该QML文件的逻辑实现。

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

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

库文件无法直接访问

parentonPressed:{Logic.func(window1.width)//传入window1的宽}}}

使用Qt.include()函数导入

}//textJs.jsQt.include(MyJS.js)//导入MyJs.js文档

function

parentonPressed:{Logic.showText()//调用showText函数Logic.func()//调用func函数}}}在程序启动时运行JavaScript

有时需要在应用程序或组件实例启动时运行一些命令性代码。

虽然将启动脚本作为全局代码包含在外部脚本文件中很诱人但由于

QML

环境可能尚未完全建立这可能会有严重的限制。

例如某些对象可能尚未创建或者某些属性绑定可能尚未建立。

使用Component元素提供的onCompleted属性可以用来在QML环境完全建立后切换到启动脚本代码的执行。

每次销毁时会发出一个destruction信号Rectangle{function

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

{func1()}}

绑定的话会跟着更新JavaScript使用属性值的方式创建属性赋值

Rectangle

{rect1.width-10rect1.height-10}}Rectangle

{id:rect2x:100width:

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

Rectangle

trueMouseArea{anchors.fill:parentid:mouse1}Component.onCompleted:

{mouse1.clicked.connect(Logic.showText)//关联到Javascript中}}

Rectangle

trueMouseArea{anchors.fill:parentid:mouse1onPressed:

QML

文件则会在仅包含外部文件本身和全局对象的作用域中执行该文件。

也就是说它无法通常的访问

QML

mouseAreaClicked(area)//错误使用//onClicked:

参考文档