集成javaScript
1. QML推荐使用属性绑定和现有的QML元素来创建界面。为了允许执行更高级的行为,QML紧密集成了必要JavaScript代码。
2. QML中提供的JavaScript环境比在网页浏览器中的更严格。
3. 在QML中不可以添加或者修改JavaScript全局对象的成员,因为这样做可能会使用一个没有经过声明的变量,
QML中会抛出一个异常,所以所有的局部变量都应该明确地声明。
1.01 内联 JavaScript
1. 较小的JavaScript函数可以和其他QML声明一起写在QML组件中。
1.02 分离的JavaScript文件
1. 大块的JavaScript代码需要写在一个独立的文件中,这些文件可以通过使用import语句导人QML文件中,
就像导人QML模块一样。
2. 定义一个js文件
.pragma library
function say(name) {
return "Hello, " + name + "!";
}
3. 导入的文件名第一个字母需要大写
import 'factoral.js' as Factoral
Rectangle {
id: rootRect
width: 800
height: 600
visible: true
MouseArea {
anchors.fill: parent
onClicked: console.log(Factoral.say('xiaoming'))
}
}
1.03 从网络资源中获取JavaScript文件
1. 相对和绝对的JavaScript路径都可以被导人。如果脚本文件不可访问,那么将发生错误。
2. 如果JavaScript需要从一个网络资源中获取,那么组件的状态会被设置为Loading,直到脚本被下载完毕。
3. 被导入的JavaScript文件总是使用as关键字来进行限定,每一个JavaScript文件的限定符必须是唯一的,在限定符和JavaScript文件之间是一对一映射的。
4. 大多数的JavaScript文件被导人一个QML文件是有状态的,经常作为该QML文件的逻辑实现。
5. 在这种情况下,为了使QML组件的实例有正确的行为,每一个实例都需要有JavaScript对象和状态的一个独立的备份。
所以导入一个JavaScrip文件时的默认行为是，为每一个QML组件实例提供一个唯一的、独立的备份。
6. JavaScript代码和QML组件实例运行在相同的范围,因此可以访问和操作对象和声明的属性。
1.04 无状态的JavaScript 库
1. 一些JavaScript文件的行为更像库文件,它们提供了一组无状态的辅助函数来提供输人和计算输出,但是从来不直接操作QML组件实例。
2. 如果每一个QML组件实例都有一个这些库的拷贝,那么会造成浪费。
3. 在js文件头中，可以使用一个pragma来指明一个特定的文件是一个没有状态的库.如：
.pragma library
1.05 js文件导入其他js文件
---------------------------------
/*factoral.js*/
Qt.include('work.js')
function say(name) {
working(name)
}
---------------------------------
/*work.js*/
function working(name) {
console.log(name, 'is working')
}
---------------------------------
import QtQuick 2.12
import QtQuick.Window 2.12
import 'factoral.js' as Factoral
Rectangle {
id: rootRect
width: 800
height: 600
visible: true
MouseArea {
anchors.fill: parent
onClicked: console.log(Factoral.say('xiaoming'))
}
}
1.06 在启动时运行JavaSeript初始化数据
1. 有时需要在应用程序(或者组件实例)启动时运行一些命令代码,但如果仅仅包含启动脚本作为全局代码,因为QML环境还没有完全建立起来,所以这样会有严重的局限。
例如一些对象可能还没有被创建或者一些属性绑定还没有被运行。
2. QML的Component元素提供了一个附加的onCompleted属性，
可以用来在QML环境完全建立以后切换到启动脚本代码的执行。
3. 任何在QML文件中的元素,包含嵌套的元素和嵌套的QML组件实例,都可以使用这个附加属性。
注意：如果有多个onCompleted()处理器在启动时执行,它们会以未定义的顺序依次执行。
类似的Component::onDestruction附加属性会在组件销毁时触发。
function startInitFunction(){
//todo
}
Component.onCompleted:startInitFunction();
1.07 QML使用JavaScript的限制
QML执行标准的JavaScript代码,会有下面的限制:
1. JavaScript代码不能修改全局对象,不能够创建新的属性。
2. JavaScript自动生成一个未声明的变量是全局对象的隐式修改, 这在QML中是禁止的。
Qt.include('work.js')
a = 1 // 正确写法： var a=1
for(var i = 1; i<10; ++i)
{
a=a*i;
}
1.08 QML动态对象管理
1. QML提供了很多方法来动态创建和管理QML对象。如
Loader
Repeater
ListView
GridView
PathView
等元素都支持动态对象管理。
2. 对象也可以在C++中被创建和管理,这是混合QML/C+十应用程序的首选方式。
3. QML也支持在JavaScript代码中动态创建对象,这在现有的QML元素不适合应用程序需要的情况下是很有用的,而且也不需要涉及C十十组件。
1.09 QML动态对象管理
这里有两种方法从 JavaScript动态创建对象:
1. 调用Qt.createComponent()来动态创建Compont对象。
2. 使用Qt.createQmlObject()从QML字符串来创建对象。
