import QtQuick1.0
/*
3.基本元素的介紹
基本可視化項
Item 基本的項元素 在QML中所有可視化的向都繼承他
Rectangle 基本的可視化矩形元素
Gradient 定義一個兩種顏色的漸變過程
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 定義一個線性的軌跡
PathQuad 定義一個二次貝塞爾曲線的軌跡
PathCubic 定義一個三次貝塞爾曲線的軌跡
PathAttribute 允許綁定一個屬性上，具體看例子
PathPercent 修改item分配的軌跡 不是很明瞭其中的意思
WebView 允許添加網頁內容到一個canvas上
定位器
Column 整理它的子列(縱)
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 移動行爲
*/
//1.Item位置是0,0 寬高分別是200
/*Item{
x:0; y:0
width:200; height:200
}*/
//2. Rectangle位置是：0,0寬高分別是200， 顏色是紅色
/*Rectangle{
x:0; y:0
height:200
width:200
color:"red"
}*/
//3. Gradient GradientStop 分別在總高度的0 顏色紅色 總高度的1/3 黃色 總高度的1是綠色
/*Rectangle{
width:100; height:200
gradient: Gradient{
GradientStop{ position:0.0; color:"red"}
GradientStop{ position:0.33; color:"yellow"}
GradientStop{ position:1.0; color:"green"}
}
}*/
//4. Image 設置一張圖片
/*Image{
source: "img/bottom_dch.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: "img/bottom_dch.png"
}*/
//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:"aaaaaaaaa";
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:mousearea
x:20; y:20
width:20; height:20
color:"red"
MouseArea{
anchors.fill: parent
//但鼠標按下後 mousrect變成紅色，當鼠標鬆開後變成藍色
onPressed: { mousearea.color="blue"}
onReleased: { mousearea.color="red"}
}
}
}*/
//14. FocusScope/
//不是很清楚說的什麼，好像是說同一個時刻只有一個item有焦點
//15. Flickable 顯示一個200x200的框，框中顯示圖片上200x200的部分
/*Flickable{
width:200; height:200
//設置使用圖片的寬 高，而現實的是 200x200的現實框
contentHeight: img.height; contentWidth: img.width;
Image{ id:img; source: "img/bottom_dch.png"}
}*/
//16. Flipable 包含兩個面，一個前面，一個後面，實現一個控件前後的翻轉效果，並且在後面可以添加一些控制
/*Flipable{
id:flipable
width:240
height:240
property int angle: 0
property bool flipped: false
front: Image{ source: "img/bottom_dch.png"} //前面
back: Image{ source: "img/bottom_jk.png"}//後面
// 旋轉動畫 前後面交換
transform: Rotation{
origin.x: flipable.width/2; origin.y:flipable.height/2
axis.x: 0; axis.y: 1; axis.z:0
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{
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"; height:150; width:150 }
}
]
MouseArea{
anchors.fill: parent
onClicked: mytext.state=="myState" ? mytext.state="" : mytext.state="myState"
}
}*/
//19. StateGroup一個狀態組中可以包含很多的狀態和變化，而狀態也可以和變換綁定.
//20. StateChangeScript
//在狀態中可以對腳本中的函數進行調用
/*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:200
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";
onClicked:blueRect.state=="reparented" ? blueRect.state="" : 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 ? rect.width = 100 : rect.width = 50;
}
}*/
//24. SequentialAnimation 串行播放多個動畫
/*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}
}
}
}*/
//25. ParallelAnimation
/*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}
}
}
}*/
//26. PropertyAnimation
/*Rectangle{
id:rect
width:100; height:100
color:'red'
states: State{
name:'moved'
PropertyChanges{ target:rect; x:100; y:100}
}
transitions: Transition {
//屬性動畫 這裏是當屬性 x或y發生變化的時候，就播放這樣一個動畫
PropertyAnimation{ properties: "x,y"; easing.type: Easing.InOutQuad}
}
MouseArea{
anchors.fill: parent;
onClicked:rect.state == "moved" ? rect.state="":rect.state="moved";
}
}*/
//27. NumberAnimation
/*Rectangle{
width:100; height:100
color:"red"
// 對當前item的x進行移動，目標移動到x = 50
NumberAnimation on x{ to:50; duration: 1000}
}*/
//28. Vector3dAnimation
//29. ColorAnimation 顏色的過度
/*Rectangle{
width:100; height:100
color:"red"
ColorAnimation on color { to: "black"; duration: 1000 }
}*/
//30. RotationAnimation 默認是繞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:rect
width:100; height:100; color:"red"
}
Rectangle{
id:blueRect
x:rect.width
width: 50; height: 50
color: "blue"
states:State{
name:"reparented"
ParentChange{ target: blueRect; parent: rect; x:10; y:10}
}
}
transitions:Transition{
ParentAnimation{
NumberAnimation{ properties: "x,y"; duration: 1000}
}
}
MouseArea{
anchors.fill: parent
onClicked: blueRect.state == "reparented" ? blueRect.state="" : 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{
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"}
}
}
}*/
//34. SmoothedAnimation 平滑過度
/*Rectangle{
width:500; height:400;
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.InOutBack}
}
}*/
//40. Binding
/*Item{
width:300; height:300
Text{ id:app; text:"xxxfa"}
TextEdit{ x:app.width; id:myTextField; text:"Please type here..."}
// 把myTextField和app的enteredText屬性進行綁定
Binding{target: app; property: "enteredText"; value:myTextField.text}
}*/
//41. ListModel 直接看效果
/*Rectangle{
width:200; height:200
ListModel{
id:fruitModel
ListElement{name: "Apple"; cost: 2.45}
ListElement{name: "Apple"; cost: 2.46}
ListElement{name: "Apple"; cost: 2.47}
ListElement{name: "Apple"; cost: 2.48}
ListElement{name: "Apple"; cost: 2.49}
}
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 把可視化圖元添加到鏈表試圖
/*Rectangle{
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:datamodl
model:ListModel{
ListElement { name: "Apple" }
ListElement { name: "Orange" }
}
delegate: Rectangle{
height:25
width:100
Text{text:"Name:"+name}
}
}
ListView{
anchors.fill: parent
model:datamodl
}
}*/
//45. Package具體請參考
//declarative/modelviews/package
//46. XmlListModel XmlRole
//從網絡獲取xml，暫時沒有測試成功
//47. ListView
//參考 ListModel VisualDataModel
//48. GridView 看效果
/*Rectangle{
width:200; height:400
ListModel{
id:fruitModel
ListElement{name: "Apple"; cost: 2.45}
ListElement{name: "Apple"; cost: 2.46}
ListElement{name: "Apple"; cost: 2.47}
ListElement{name: "Apple"; cost: 2.48}
ListElement{name: "Apple"; cost: 2.49}
}
GridView{
anchors.fill: parent
model:fruitModel
delegate: Column{
Text{text:"name" +name}
Text{text:"cost" + cost}
}
}
}*/
//49．PathView Path
/*Rectangle{
width:200; height:400
ListModel{
id:fruitModel
ListElement{name: "Apple"; cost: 2.45}
ListElement{name: "Apple"; cost: 2.46}
ListElement{name: "Apple"; cost: 2.47}
ListElement{name: "Apple"; cost: 2.48}
ListElement{name: "Apple"; cost: 2.49}
}
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:25; controlX: -20; controlY: 75}
}
}
}*/
//50．PathLine 具體的看運行的例子
/*Rectangle{
width:200; height:400
ListModel{
id:fruitModel
ListElement{name: "Apple"; cost: 2.45}
ListElement{name: "Apple"; cost: 2.46}
ListElement{name: "Apple"; cost: 2.47}
}
PathView{
anchors.fill: parent
model:fruitModel
delegate: Column{
Text{ text:"name"+name}
Text{ text:"cost"+cost}
}
path:Path{
startX: 150; startY: 120
PathLine{x:300; y:80}
PathLine{x:200; y:80}
PathLine{x:100; y:120}
}
}
}*/
//51．PathQuad參考 PathView Path
//52．PathCubic
//53．PathAttribute 可以直接針對一些屬性進行改變
/*Rectangle{
width:200; height:400
ListModel{
id:fruitModel
ListElement{name: "Apple"; cost: 2.45}
ListElement{name: "Apple"; cost: 2.46}
ListElement{name: "Apple"; cost: 2.47}
}
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
/*Rectangle{
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:50; height:50}
Rectangle{ color:"blue"; width:50; height:50}
}
}*/
//57 Row
/*Rectangle{
Row{
spacing: 3
Rectangle{ color:"red"; width:50; height:50}
Rectangle{ color:"green"; width:50; height:50}
Rectangle{ color:"blue"; width:50; height:50}
}
}*/
//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: 30; 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
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()
}
Text{ id:time}
}*/
/*63 QtObject
他是不可見的只有objectName一個屬性
通過這個屬性我們可以在c++中找到我們想要的對象*/
//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"
}
}
}*/
//68 SystemPalette 具體看效果和文檔
/*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 // 沿y軸正方向移動20個像素
Row{
Rectangle{
width: 100; height:100
color:"blue"
transform: Translate{ y:20}
}
Rectangle{
width:100; height:100
color:"red"
// 沿y軸負方向移動20個像素
transform: Translate{ y:-20}
}
} 點擊查看原文鏈接
