天天看点
返回

QML类型：WorkerScript、Timer、Transition

作者：QT教程

WorkerScript

使用 WorkerScript 在新线程中运行操作。这对于在后台运行操作很有用，这样主 GUI 线程就不会被阻塞。

可以使用 sendMessage() 和 onMessage() 处理程序在新线程和父线程之间传递消息。

一个例子：

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
visible: true
width: 840
height: 600

Rectangle
{
anchors.fill: parent

Text
{
id: myText
text: '单击任何位置'
}

WorkerScript
{
id: myWorker
source: "qrc:/script.mjs"

onMessage: function(messageObject)
{
myText.text = messageObject.reply
}
}

MouseArea
{
anchors.fill: parent
onClicked: function(mouse)
{
myWorker.sendMessage({ 'x': mouse.x, 'y': mouse.y })
}
}
}
}

指定了一个 JavaScript 文件“script.mjs”，它处理要在新线程中执行的操作。

script.mjs
WorkerScript.onMessage = function(message)
{
WorkerScript.sendMessage({ 'reply': '鼠标位置：' + message.x + ',' + message.y })
}
QML类型：WorkerScript、Timer、Transition

当用户单击矩形内的任意位置时，将调用 sendMessage()，触发 script.mjs 中的 WorkerScript.onMessage() 处理程序。这反过来发送一条回复消息，然后由 myWorker 的 onMessage() 处理程序接收。

每个 WorkerScript 元素都会实例化一个单独的 JavaScript 引擎，以确保完美的隔离和线程安全。

因为WorkerScript.onMessage() 函数在单独的线程中运行，所以上例中的 script.mjs 无法访问 QML 项的属性、方法。

二、属性成员

1、ready : bool

WorkerScript 是否已初始化并准备好通过 WorkerScript.sendMessage() 接收消息。

2、source : url

为线程操作实现 WorkerScript.onMessage() 处理程序的 JavaScript 文件的 url。

如果 url 的文件名部分以“.mjs”结尾，则脚本被解析为 ECMAScript 模块并以严格模式运行。 否则，它被认为是纯脚本。

三、信号成员

1、message(jsobject msg)

通过调用 sendMessage() 从另一个线程中的工作脚本接收到消息 msg 时，会发出此信号。

四、成员函数

1、sendMessage(jsobject message)

将给定的消息发送到另一个线程中的工作脚本处理程序。另一个工作脚本处理程序可以通过 onMessage() 处理程序接收此消息。

message 对象只能包含以下类型的值：

  • 布尔值、数字、字符串
  • JavaScript 对象和数组
  • ListModel 对象（不允许使用任何其他类型的 QObject*）

所有对象和数组都被复制到消息中。除了 ListModel 对象，其他线程对消息中传递的对象所做的任何修改都不会反映在原始对象中。

Timer属性成员

1、interval : int

设置触发器之间的间隔，以毫秒为单位。默认间隔为 1000 毫秒。

2、repeat : bool

定时器是否以指定的时间间隔重复触发。默认为false。

3、running : bool

设置启动 / 停止计时器。运行为false。

对于非重复计时器（repeat : false），在触发定时器后将 running 设置为 false。

4、triggeredOnStart : bool

定时器是否在启动时立即触发。默认为 false。

注意如果 repeat 设置为false，则定时器触发两次：开始时一次，间隔一次。

二、信号成员

1、triggered()

当定时器超时时发出该信号。

三、成员函数

1、restart()

重新启动计时器。调用后 running 属性将为 true。

如果定时器未运行，它将启动，否则将停止，重置为初始状态并启动。

2、start()

启动计时器。调用后 running 属性将为 true。如果计时器已经在运行，则调用此方法无效。

3、stop()

停止计时器。调用后，running 属性将为 false。如果计时器未运行，则调用此方法无效。

Transition描述

Transition 定义了当 State 发生变化时要应用的动画。

例如，下面的 Rectangle 有两种状态：默认状态和添加的“moved”状态。 在“moved”状态下，矩形的位置更改为 (50, 50)。添加的 Transition 指定当矩形在默认状态和“moved”状态之间更改时，对 x 和 y 属性的任何更改都应使用动画 Easing.InOutQuad。

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
visible: true
width: 300
height: 300
Rectangle
{
id: rect
width: 100; height: 100
color: "red"

MouseArea
{
id: mouseArea
anchors.fill: parent
}

states: State
{
name: "moved"; when: mouseArea.pressed
PropertyChanges { target: rect; x: 50; y: 50 }
}

transitions: Transition
{
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
}
}
}
QML类型：WorkerScript、Timer、Transition

请注意，该示例不需要 NumberAnimation 的 to 和 from 值。为方便起见，这些属性会在状态更改前后自动设置为 x 和 y 的值；from 值由 x 和 y 的当前值提供，to 值由 PropertyChanges 对象提供。如果需要，可以提供 to 和 from 值以覆盖默认值。

默认情况下，Transition 的动画应用于父项中的任何状态更改。可以设置 Transition 的 from 和 to 值以限制动画仅在从一种特定状态更改为另一种状态时应用。

要定义多个 Transition ，请将 Item::transitions 指定为列表：

transitions:
[
Transition
{
from: "*"; to: "middleRight"
NumberAnimation
{
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 2000;
}
},
Transition
{
from: "*"; to: "bottomLeft";
NumberAnimation
{
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 200;
}
},
Transition
{
from: "*"; to: "*";
NumberAnimation
{
easing.type: Easing.OutBounce;
properties: "x,y";
duration: 4000;
}
}
]

如果指定了多个转换，则对于任何特定状态更改，只会应用单个（最佳匹配）转换。在上面的例子中，如果 Rectangle 进入“middleRight”或“bottomLeft”以外的状态，则将执行第三个 Transition，这意味着图标将移动到起点。

如果状态更改具有与 Behavior 具有相同属性的 Transition，则 Transition 动画将覆盖该状态更改的 Behavior。

二、属性成员

1、from : string

to : string

这些属性指示触发转换的状态更改。默认值为“*”（即任何状态）。

例如，下面的过渡没有设置 to 和 from 属性，因此在两种状态之间切换时（即按下和释放鼠标时）始终应用动画。

Rectangle
{
id: rect
width: 100; height: 100
color: "red"

MouseArea { id: mouseArea; anchors.fill: parent }

states: State
{
name: "brighter"; when: mouseArea.pressed
PropertyChanges { target: rect; color: "yellow" }
}

transitions: Transition
{
ColorAnimation { duration: 1000 }
}
}
如果转换改成这样：
transitions: Transition
{
to: "brighter"
ColorAnimation { duration: 1000 }
}

仅当从默认状态更改为“brighter”状态时才会应用动画。

可以使用逗号分隔的字符串设置多个 to 和 from 值。

2、animations : list<Animation>

此属性包含要为此转换运行的动画列表。

transitions: Transition
{
PropertyAnimation { duration: 3000 }
ColorAnimation { duration: 3000 }
}

顶级动画并行运行。要按顺序运行它们，请在 SequentialAnimation 中定义它们：

transitions: Transition
{
to: "brighter"
reversible: true
SequentialAnimation
{
PropertyAnimation { property: "x"; duration: 1000 }
ColorAnimation { duration: 1000 }
}
}

3、enabled : bool

此属性保存从 from 状态移动到 to 状态时是否运行 Transition。默认情况下启用转换。

4、reversible : bool

此属性保存在反转触发此转换的条件时是否应自动反转转换。默认值为false。

默认情况下，如果尚未设置 from 和 to 状态，则转换并行运行并应用于所有状态更改。 在这种情况下，当状态更改被反转时会自动应用转换，并且不需要设置此属性来反转转换。

但是，如果使用 SequentialAnimation，或者如果设置了 from 或 to 属性，则需要设置此属性以在恢复状态更改时反转转换。

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
visible: true
width: 300
height: 300
Rectangle
{
id: rect
width: 100; height: 100
color: "red"

MouseArea
{
id: mouseArea
anchors.fill: parent
}

states:
[
State
{
name: "s1"; when: mouseArea.pressed
PropertyChanges { target: rect; x: 50; y: 50 }
PropertyChanges { target: rect; color: "lightsteelblue"}

}
]

transitions: Transition
{
from: "*";to:"s1"
reversible:false
SequentialAnimation
{
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad;duration: 1000}
ColorAnimation { duration: 1000 }
}
}
}
}

当从其他状态进入s1状态时，应用了顺序动画，先改变位置再改变颜色。松开鼠标退出s1状态进入默认状态。

QML类型：WorkerScript、Timer、Transition

当设置：

reversible:true
QML类型：WorkerScript、Timer、Transition

当退出s1状态时反向使用顺序动画，先改变颜色再改变位置。

5、running : bool

只读属性。转换当前是否正在运行。

【领QT开发教程学习资料，点击下方链接莬费领取↓↓，先码住不迷路~】

点击这里：「链接」

Worker cript ansi
上一篇: JavaScript字符串常用方法汇总
下一篇: Docker镜像上传到DockerHub和阿里容器仓库push到Docker Hubpush到阿里云镜像库

继续阅读