- 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”;}
}
}
}
- FocusScope
不是很清楚說的什麼，好像是說同一個時刻只有一個item有焦點
- Flickable
顯示一個200x200的框，框中顯示圖片上200x200的部分
Flickable {
width: 200; height: 200
// 設置使用圖片的寬高，而現實的是 200x200的現實框
contentWidth: image.width; contentHeight:image.height
Image { id: image; source:”../Images/need.png” }
}
- 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 // rotatearound 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
}
}
- 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” }
}
]
}
