QML是一種描述語言，主要是對界面效果等的一種描述，它可以結合javaScript來進行更復雜的效果及邏輯實現。比如做個遊戲，實現一些更有趣的功能等
2. 簡單的例子
import Qt 4.7
Rectangle {
width: 200
height: 200
color: "blue"
}
代碼是繪製一個藍色的矩形，寬 200 高 200， import包含一個qt4.7的包
3.基本元素的介紹（自己翻譯意思會有出入，敬請見諒）
基本可視化項
Item 基本的項元素 在QML中所有可視化的向都繼承他
Rectangle 基本的可視化矩形元素
GradientStop 定義個顏色，被Gradient使用
Image 在場景中使用位圖
BorderImage(特殊的項) 定義一張圖片並當做邊界
AnimatedImage 爲播放動畫存儲一系列的幀
Text 在場景中使用文本
TextInput 顯示可編輯爲文本
IntValidator int 驗證器
DoubleValidator double 驗證器
RegExpValidator 驗證字符串正則表達式
TextEdit 顯示多行可編輯文本
基本的交互項
MouseArea 鼠標句柄交互
FocusScope 鍵盤焦點句柄
Flickable 提供一種瀏覽整張圖片的一部分的效果,具體看例子
Flipable 提供一個平面，可以進行翻轉看他的前面或後面,具體看例子
狀態
State 定義一個配置對象和屬性的集合
PropertyChanges 使用一個State描述屬性的改變
StateGroup 包含一個狀態集合和狀態變換
ParentChange 重新定義父集，也就是換個父節點
AnchorChanges 在一個狀態中改變anchors
動畫和變換
Behavior 默認的屬性變換動畫
SequentialAnimation 對定義的動畫串行播放
ParallelAnimation 對定義的動畫並行播放
PropertyAnimation 屬性變換動畫
NumberAnimation 對實數類型屬性進行的動畫
Vector3dAnimation 對QVector3d進行的屬性
ColorAnimation 顏色進行的變換動畫
RotationAnimation 對旋轉進行的變換動畫
ParentAnimation 對父節點進行變換的動畫，改變綁定的父節點
AnchorAnimation 對anchor 進行改變的動畫
PauseAnimation 延遲處理
SmoothedAnimation 允許屬性平滑的過度
SpringAnimation 一種加速的效果
PropertyAction 允許在動畫過程中對屬性的直接改變
ScriptAction 允許動畫過程中調用腳本
Transition 在狀態變換中加入動作變化
工作中的數據
Binding 在創建的時候綁定一些數據到一些屬性
ListModel 定義鏈表數據
ListElement 定義ListModel的一個數據項
VisualItemModel 包含可視化項(visual items)到一個view中，相當是一個容器
VisualDataModel 包含一個model和一個delegate，model包含需要的數據，delegate設計顯示的項的信息，具體的去看例子
Package 他的目的是把VisualDataModel共享給多個view，具體還要學習
XmlListModel 特殊的一個模式使用XPath表達式，使用xml來設置元素，參考例子
XmlRole XmlListModel的一個特殊的角色
試圖
ListView 提供一個鏈表顯示模型試圖
GridView 提供一個網格顯示模型試圖
PathView 提供一個內容沿着路徑來顯示的模型
Path 定義一個PathView使用的軌跡
PathLine 定義一個線性的軌跡
PathCubic 定義一個三次貝塞爾曲線的軌跡
PathAttribute 允許綁定一個屬性上，具體看例子
PathPercent 修改item分配的軌跡不是很明瞭其中的意思
WebView 允許添加網頁內容到一個canvas上
定位器
Row 整理它的子行(橫)
Grid 設置它的子到一個網格上
Flow 目的是不讓他的子項重疊在一起
實用
Connections 明確連接信號和信號句柄
Component 封裝QML items 想一個組件一樣
Timer 提供時間觸發器
QtObject 基本的元素只包含objectName屬性
Qt qml全局Qt object提供使用的枚舉和函數
WorkerScript 允許在QML使用線程
Loader 控制載入item或組件
Repeater 使用一個模型創建多個組件
SystemPalette 爲Qt palettes提供一個通道
FontLoader 載入字體根據名字或URL
LayoutItem 允許聲明UI元素插入到qtGraphicsView 佈局中
變換
Scale 分派item 縮放行爲
Rotation 分派item 旋轉行爲
Translate 分派item 移動行爲
4.基本元素的使用例子
1. Item位置是0,0 寬高分別是200
Item {
x: 0; y: 0;
width: 200; height: 200;
}
2. Rectangle位置是：0,0寬高分別是200，顏色是紅色
Rectangle {
x: 0; y: 0;
width: 200; height: 200;
color: "red"
}
3. Gradient GradientStop 分別在總高度的0 顏色紅色 總高度的1/3 黃色 總高度的1是綠色
Rectangle {
width: 100; height: 100
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.33; color: "yellow" }
GradientStop { position: 1.0; color: "green" }
}
}
4. Image 設置一張圖片
Image {
source: "../Images/button1.png"
}
5. BorderImage 他將一張圖片分成9部分
當圖片進行縮放的時候
A．1 3 7 9 位置的都不會進行縮放
B. 2 8將根據屬性horzontalTileMode 進行縮放
C．4 6 將根據屬性verticalTileMode 進行縮放
D．5 將根據屬性horzontalTileMode 和 verticalTileMode 進行縮放
BorderImage {
width: 180; height: 180
// 分割1~9塊的4個點是根據border設置的座標來實現的
// 本別是距離座標 上邊 右邊 下邊的距離
border { left: 30; top: 30; right: 30; bottom: 30 }
horizontalTileMode: BorderImage.Stretch
verticalTileMode: BorderImage.Stretch
source: "../Images/button1.png"
}
6. AnimatedImage 主要用於播放gif圖片
Rectangle {
width: animation.width; height: animation.height + 8
AnimatedImage { id: animation; source: "animation.gif" }
Rectangle {
property int frames: animation.frameCount
width: 4; height: 8
x: (animation.width - width) * animation.currentFrame / frames
y: animation.height
color: "red"
}
}
7. Text 顯示文本(具體的其他設置請看文檔)
Text {
text: "text"
}
8. TextInput 下面是設置一個輸入文本框，框中的字符串是Text, 並設置鼠標可以選擇文本
TextInput{
text: "Text"
selectByMouse: true; // 鼠標可以選擇
}
9．IntValidator int 型驗證器，和輸入框結合後就是隻能輸入整型數據
TextInput{
// 最高可以輸入100， 最低輸入10
IntValidator{id: intval; bottom: 10; top: 100;}
width: 100; height: 20;
text: "";
// 使用校驗器
validator: intval;
}
10. DoubleValidator 只能輸入浮點數
TextInput{
// 最高可以輸入100， 最低輸入10 decimals最多有多少位小數
// notation 表示是使用科學計數法還是(默認),還是直接的小數 當獲取裏面的數據
DoubleValidator{id: intval; decimals: 4; bottom: 10; top: 100; notation: DoubleValidator.StandardNotation}
width: 100; height: 20;
text: "";
// 使用校驗器
validator: intval;
}
11. RegExpValidator 使用正則表達式
TextInput{
// 使用一個正則表達式來控制輸入的字符串
// /^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/ 表示 開始位置必須是一個大寫或小寫字母
// 接下來是0~2個的數字而且是0或1，在接下來是1~3個的小寫字母
RegExpValidator{id: intval; regExp:/^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/;}
width: 100; height: 20;
text: "";
// 使用校驗器
validator: intval;
}
12. TextEdit
顯示一段hello world的html文本和TextInput相同
TextEdit {
width: 240
text: "<b>Hello</b> <i>World!</i>"
font.family: "Helvetica"
font.pointSize: 20
color: "blue"
focus: true
}
13. MouseArea
主要是用來判斷鼠標事件的區域
Rectangle{
x: 0; y: 0;
width: 100; height:100;
Rectangle{
id: mousrect
x: 20; y: 20;
width: 20; height: 20;
color: "blue"
MouseArea{
// 使用父的區域作爲鼠標判斷的區域及 x: 20; y: 20; width: 20; height: 20;
anchors.fill: parent;
// 但鼠標按下後 mousrect變成紅色，當鼠標鬆開後變成藍色
onPressed: { mousrect.color = "red";}
onReleased: { mousrect.color = "blue";}
}
}
}
14. FocusScope
不是很清楚說的什麼，好像是說同一個時刻只有一個item有焦點
15. Flickable
顯示一個200x200的框，框中顯示圖片上200x200的部分
Flickable {
width: 200; height: 200
// 設置使用圖片的寬 高，而現實的是 200x200的現實框
contentWidth: image.width; contentHeight: image.height
Image { id: image; source: "../Images/need.png" }
}
16. Flipable
包含兩個面，一個前面，一個後面，實現一個控件前後的翻轉效果，並且在後面可以添加一些控制
Flipable {
id: flipable
width: 240
height: 240
property int angle: 0
property bool flipped: false
front: Image { source: "front.png" } // 前面
back: Image { source: "back.png" } // 後面
// 旋轉動畫 前後面交換
transform: Rotation {
origin.x: flipable.width/2; origin.y: flipable.height/2
axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis
angle: flipable.angle
}
states: State {
name: "back"
PropertyChanges { target: flipable; angle: 180 }
when: flipable.flipped
}
transitions: Transition {
NumberAnimation { properties: "angle"; duration: 1000 }
}
MouseArea {
anchors.fill: parent
onClicked: flipable.flipped = !flipable.flipped
}
}
17. State
// 當鼠標按下後改變 myRect 的顏色
Rectangle {
id: myRect
width: 100; height: 100
color: "black"
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
}
// 設置狀態
states: [
State {
name: "clicked"
PropertyChanges { target: myRect; color: "red" }
}
]
}
18. PropertyChanges
// 當鼠標按下後改變狀態
// 狀態裏面的屬性改變包含了文本和顏色的改變
Text {
id: myText
width: 100; height: 100
text: "Hello"
color: "blue"
states: State {
name: "myState"
// 當這個狀態被設置的時候，將改變myText的文本和顏色
PropertyChanges {
target: myText
text: "Goodbye"
color: "red"
}
}
MouseArea { anchors.fill: parent; onClicked: myText.state = 'myState' }
}
19. StateGroup
一個狀態組中可以包含很多的狀態和變化，而狀態也可以和變換綁定.
在狀態中可以對腳本中的函數進行調用
// Sc.js
function changeColor() // 返回藍色
{
return "blue";
}
// test.qml
import "Sc.js" as Code
Rectangle{
id: rect
width: 50; height: 50
color: "red"
MouseArea {
anchors.fill: parent
onClicked: rect.state = "first" // 鼠標按下改變狀態
}
states: State {name: "first";
StateChangeScript{
name: "myScript";
script: rect.color = Code.changeColor();
}
}
}
21. ParentChang
把指定的item換一個item父節點
Item {
width: 200; height: 100
Rectangle {
id: redRect
width: 100; height: 100
color: "red"
}
// 本來blueRect的父節點是Item 當鼠標按下後他被設置到 redRect上
Rectangle {
id: blueRect
x: redRect.width
width: 50; height: 50
color: "blue"
states: State {
name: "reparented"
// 改變父節點
ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
}
MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
}
}
22. AnchorChanges
Rectangle {
id: window
width: 120; height: 120
color: "black"
Rectangle { id: myRect; width: 50; height: 50; color: "red" }
states: State {
name: "reanchored"
AnchorChanges { // 改變 myRect 的anchors屬性
target: myRect
anchors.top: window.top
anchors.bottom: window.bottom
}
PropertyChanges {
target: myRect
anchors.topMargin: 10
anchors.bottomMargin: 10
}
}
// 鼠標事件
MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
}
23. Behavior
Rectangle {
id: rect
width: 100; height: 100
color: "red"
// 針對寬度的動畫
Behavior on width {
NumberAnimation { duration: 1000 }
}
MouseArea {
anchors.fill: parent
onClicked: rect.width = 50
}
}
串行播放多個動畫
Rectangle {
id: rect1
width: 500; height: 500
Rectangle{
id: rect;
color: "red"
width: 100; height: 100
// 串行播放多個動畫，先橫向移動，在縱向移動
SequentialAnimation{
running: true;
NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }
NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }
}
}
}
Rectangle {
id: rect1
width: 500; height: 500
Rectangle{
id: rect;
color: "red"
width: 100; height: 100
// 並行播放動畫，同時橫向和縱向移動
ParallelAnimation{
running: true;
NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }
NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }
}
}
}
Rectangle {
id: rect
width: 100; height: 100
color: "red"
states: State {
name: "moved"
PropertyChanges { target: rect; x: 50 }
}
transitions: Transition {
// 屬性動畫 這裏是當屬性 x或y發生變化的時候，就播放這樣一個動畫
PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
}
MouseArea{
anchors.fill: parent;
onClicked: rect.state = "moved";
}
}
27. NumberAnimation
Rectangle {
width: 100; height: 100
color: "red"
// 對當前item的x進行移動，目標移動到x = 50
NumberAnimation on x { to: 50; duration: 1000 }
}
29. ColorAnimation
顏色的過度
Rectangle {
width: 100; height: 100
color: "red"
ColorAnimation on color { to: "yellow"; duration: 1000 }
}
默認是繞z軸進行的旋轉
Item {
width: 300; height: 300
Rectangle {
id: rect
width: 150; height: 100; anchors.centerIn: parent
color: "red"
smooth: true
states: State {
name: "rotated"; PropertyChanges { target: rect; rotation: 180 }
}
transitions: Transition {
RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
}
}
MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }
}
31. ParentAnimation
一個切換父節點的動畫,平滑的過度
Item {
width: 200; height: 100
Rectangle {
id: redRect
width: 100; height: 100
color: "red"
}
Rectangle {
id: blueRect
x: redRect.width
width: 50; height: 50
color: "blue"
states: State {
name: "reparented"
ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
}
transitions: Transition {
ParentAnimation {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
}
}
32. AnchorAnimation
Item {
id: container
width: 200; height: 200
Rectangle {
id: myRect
width: 100; height: 100
color: "red"
}
states: State {
name: "reanchored"
AnchorChanges { target: myRect; anchors.right: container.right }
}
transitions: Transition {
// smoothly reanchor myRect and move into new position
AnchorAnimation { duration: 1000 }
}
// 當控件加載完成後
Component.onCompleted: container.state = "reanchored"
}
33. PauseAnimation
延遲效果
Item {
id: container
width: 200; height: 200
Rectangle {
id: myRect
width: 100; height: 100
color: "red"
SequentialAnimation {
running: true;
NumberAnimation {target: myRect;to: 50; duration: 1000; properties: "x"; }
PauseAnimation { duration: 5000 } // 延遲100毫秒
NumberAnimation {target: myRect; to: 50; duration: 1000; properties: "y"; }
}
}
}
平滑過度
Rectangle {
width: 800; height: 600
color: "blue"
Rectangle {
width: 60; height: 60
x: rect1.x - 5; y: rect1.y - 5
color: "green"
Behavior on x { SmoothedAnimation { velocity: 200 } }
Behavior on y { SmoothedAnimation { velocity: 200 } }
}
Rectangle {
id: rect1
width: 50; height: 50
color: "red"
}
focus: true
Keys.onRightPressed: rect1.x = rect1.x + 100
Keys.onLeftPressed: rect1.x = rect1.x - 100
Keys.onUpPressed: rect1.y = rect1.y - 100
Keys.onDownPressed: rect1.y = rect1.y + 100
}
35. SpringAnimation
平滑的過度過程，在動畫結束的時候有種彈性的效果
Item {
width: 300; height: 300
Rectangle {
id: rect
width: 50; height: 50
color: "red"
Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
}
MouseArea {
anchors.fill: parent
onClicked: {
rect.x = mouse.x - rect.width/2
rect.y = mouse.y - rect.height/2
}
}
}
36. PropertyAction
主要是在動畫過程中直接的改變一個屬性
transitions: Transition {
...
PropertyAction { target: theImage; property: "smooth"; value: true }
...
}
38. ScriptAction
在動畫過程中嵌入腳本的調用
SequentialAnimation {
NumberAnimation { ... }
ScriptAction { script: doSomething(); }
NumberAnimation { ... }
}
39. Transition
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 }
}
}
40. Binding
Item {
width: 300; height: 300
Text {id: app; text: "xxxfa"}
TextEdit { id: myTextField; text: "Please type here..." }
// 把myTextField和app的enteredText屬性進行綁定
Binding { target: app; property: "enteredText"; value: myTextField.text }
}
41. ListModel
直接看效果
Rectangle {
width: 200; height: 200
id: fruitModel
ListElement {
name: "Apple"
cost: 2.45
}
ListElement {
name: "Orange"
cost: 3.25
}
ListElement {
name: "Banana"
cost: 1.95
}
}
Component {
id: fruitDelegate
Row {
spacing: 10
Text { text: name }
Text { text: '$' + cost }
}
}
ListView {
anchors.fill: parent
model: fruitModel
delegate: fruitDelegate
}
}
42. ListElement
請參照ListModel
43. VisualItemModel
把可視化圖元添加到鏈表試圖
width: 100; height: 100;
VisualItemModel {
id: itemModel
Rectangle { height: 30; width: 80; color: "red" }
Rectangle { height: 30; width: 80; color: "green" }
Rectangle { height: 30; width: 80; color: "blue" }
}
ListView {
anchors.fill: parent
model: itemModel
}
}
44. VisualDataModel
看下面效果
Rectangle {
width: 200; height: 100
VisualDataModel {
id: visualModel
model: ListModel {
ListElement { name: "Apple" }
ListElement { name: "Orange" }
}
delegate: Rectangle {
height: 25
width: 100
Text { text: "Name: " + name}
}
}
ListView {
anchors.fill: parent
model: visualModel
}
}
45. Package
具體請參考
declarative/modelviews/package
46. XmlListModel XmlRole
從網絡獲取xml，暫時沒有測試成功
47. ListView
48. GridView
看效果
Rectangle {
width: 200; height: 400;
ListModel {
id: fruitModel
ListElement {
name: "Apple"
cost: 2.45
}
ListElement {
name: "Orange"
cost: 3.25
}
ListElement {
name: "Banana"
cost: 1.95
}
}
GridView {
anchors.fill: parent
model: fruitModel
delegate: Column{
Text {text:"name" + name}
Text {text:"cost"+ cost}
}
}
}
看例子
Rectangle {
width: 200; height: 400;
ListModel {
id: fruitModel
ListElement {
name: "Apple"
cost: 2.45
}
ListElement {
name: "Orange"
cost: 3.25
}
ListElement {
name: "Banana"
cost: 1.95
}
}
PathView {
anchors.fill: parent
model: fruitModel
delegate: Column{
Text {text:"name" + name}
Text {text:"cost"+ cost}
}
path:Path{
startX: 120; startY: 100
PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
}
}
}
50．PathLine
具體的看運行的例子
Rectangle {
width: 200; height: 400;
ListModel {
id: fruitModel
ListElement {
name: "Apple"
cost: 2.45
}
ListElement {
name: "Orange"
cost: 3.25
}
ListElement {
name: "Banana"
cost: 1.95
}
}
PathView {
anchors.fill: parent
model: fruitModel
delegate: Column{
Text {text:"name" + name}
Text {text:"cost"+ cost}
}
path:Path{
startX: 150; startY: 120
PathLine { x: 200; y: 80; }
PathLine { x: 100; y: 80; }
PathLine { x: 150; y: 120; }
}
}
}
51．PathQuad
52．PathCubic
還要看
可以直接針對一些屬性進行改變
Rectangle {
width: 200; height: 400;
ListModel {
id: fruitModel
ListElement {
name: "Apple"
cost: 2.45
}
ListElement {
name: "Orange"
cost: 3.25
}
ListElement {
name: "Banana"
cost: 1.95
}
}
PathView {
anchors.fill: parent
model: fruitModel
delegate:
Item {
id: delitem;
width: 80; height: 80;
Column{
// 這裏使用圖片試試
Rectangle {
width: 40; height: 40;
scale: delitem.scale;
color: "red"
}
Text {text:"name" + name}
Text {text:"cost"+ cost}
}
}
//
path: Path {
startX: 120; startY: 100
PathAttribute { name: "Scale"; value: 1.0 }
PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
PathAttribute { name: "Scale"; value: 0.3 }
PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
}
}
}
54．PathPercent
具體請看QML文檔
55．WebView
import QtWebKit 1.0
WebView {
url: "http://www.nokia.com"
preferredWidth: 490
preferredHeight: 400
scale: 0.5
smooth: false
}
56 Column
橫向排列
Rectangle{
width: 100; height: 100;
// 縱向排列
Column {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
}
57 Row
Rectangle{
width: 100; height: 100;
// 橫向排列
Row {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
}
58 Grid
Rectangle{
width: 100; height: 100;
// 網格排列
Grid {
columns: 3
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
Rectangle { color: "cyan"; width: 50; height: 50 }
Rectangle { color: "magenta"; width: 10; height: 10 }
}
}
59 Flow
Rectangle{
width: 100; height: 100;
// 網格排列
Flow {
spacing: 2
width: 100; height: 100;
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
Rectangle { color: "cyan"; width: 50; height: 50 }
Rectangle { color: "magenta"; width: 10; height: 10 }
}
}
60 Connections
下面是3中情況下會使用的，具體的不好翻譯
Multiple connections to the same signal are required
有多個連接要連接到相同的信號時
Creating connections outside the scope of the signal sender
創建的連接在範圍之外
Connecting to targets not defined in QML
創建的連接沒有在QML中定義的
Rectangle{
width: 100; height: 100;
MouseArea {
id: area
anchors.fill: parent;
}
Connections {
target: area
onClicked: { console.log(" ok");}
}
}
61 Component
組件是可以重用的QML元素，具體還是看QML的文檔翻譯不是很好
Item {
width: 100; height: 100
// 定義一個組件他包含一個10x10的紅色矩形
Component {
id: redSquare
Rectangle {
color: "red"
width: 10
height: 10
}
}
// 動態的載入一個組件
Loader { sourceComponent: redSquare }
Loader { sourceComponent: redSquare; x: 20 }
}
62 Timer
Item {
width: 200; height: 40;
// 和QTimer 差不多
Timer {
interval: 500; running: true; repeat: true
onTriggered: time.text = Date().toString() // 使用javascript獲取系統時間
}
Text { id: time }
}
63 QtObject
他是不可見的只有objectName一個屬性
通過這個屬性我們可以在c++中找到我們想要的對象
// MyRect.qml
import Qt 4.7
Item {
width: 200; height: 200
Rectangle {
anchors.fill: parent
color: "red"
objectName: "myRect"
}
}
// main.cpp
QDeclarativeView view;
view.setSource(QUrl::fromLocalFile("MyRect.qml"));
view.show();
QDeclarativeItem *item = view.rootObject()->findChild<QDeclarativeItem*>("myRect");
if (item)
item->setProperty("color", QColor(Qt::yellow));
64 Qt
提供全局有用的函數和枚舉，具體的看QML文檔
65. WorkerScript
使用它可以把操作放到一個新的線程中，使得它在後臺運行而不影響主GUI
具體可以看QML中它的文檔
66. Loader
可以參考Component
還有QML中的文檔
67 Repeater
他可以創建很多相似的組件，QML中還有幾個例子
Row {
Repeater {
model: 3
Rectangle {
width: 100; height: 40
border.width: 1
color: "yellow"
}
}
}
具體看效果和文檔
Rectangle {
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
width: 640; height: 480
color: myPalette.window
Text {
anchors.fill: parent
text: "Hello!"; color: myPalette.windowText
}
}
69. FontLoader
載入一種字體，可以是網絡上的，也可以是本地的
Column {
FontLoader { id: fixedFont; name: "Courier" }
FontLoader { id: webFont; source: "http://www.mysite.com/myfont.ttf" }
Text { text: "Fixed-size font"; font.family: fixedFont.name }
Text { text: "Fancy font"; font.family: webFont.name }
}
70 LayoutItem
不清楚
71 Scale
對縮放的控制
Rectangle {
width: 100; height: 100
color: "blue"
Rectangle{
x: 50; y: 50;
width: 20; height: 20;
color: "red"
// 這裏是在當前矩形的中間位置沿x軸進行3倍縮放
transform: Scale { origin.x: 10; origin.y: 10; xScale: 3}
}
}
72 Rotation
Rectangle {
width: 100; height: 100
color: "blue"
// 繞位置25,25 旋轉45度
transform: Rotation { origin.x: 25; origin.y: 25; angle: 45}
}
73 Translate
Row {
Rectangle {
width: 100; height: 100
color: "blue"
// 沿y軸正方向移動20個像素
transform: Translate { y: 20 }
}
Rectangle {
width: 100; height: 100
color: "red"
// 沿y軸負方向移動20個像素
transform: Translate { y: -20 }
}
}
