天天看點
傳回

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到阿裡雲鏡像庫

繼續閱讀