QML滚动、翻转效果

实现滚动条功能:

1. <span style="font-family:Comic Sans MS; font-size:18px">import QtQuick 2.0  
2.   
3. Rectangle  
4. {  
5.     width: 480  
6.     height: 320  
7.     color: "blue"  
8.   
9.     Flickable  
10.     {  
11.         id: flick  
12.   
13.         width: 300  
14.         height: 200  
15.         //可拖拽内容大小  
16.         contentWidth: image.width  
17.         contentHeight: image.height  
18.         //隐藏大于显示窗口的部分  
19.         clip: true;  
20.   
21.         Image  
22.         {  
23.             id: image  
24.             source: "pics/1.jpg"  
25.         }  
26.     }  
27.   
28.     //竖滚动条  
29.     Rectangle  
30.     {  
31.         id: scrollbar_vertical  
32.         anchors.right: flick.right  
33.         //当前可视区域的位置.为百分比值,0-1之间  
34.         y: flick.visibleArea.yPosition * flick.height  
35.         width: 10  
36.         //当前可视区域的高度比例,为百分比值,0-1之间  
37.         height: flick.visibleArea.heightRatio * flick.height  
38.         color: "black"  
39.     }  
40.   
41.     //横滚动条  
42.     Rectangle  
43.     {  
44.         id: scrollbar_horizontal  
45.         anchors.bottom: flick.bottom  
46.         //当前可视区域的位置.为百分比值,0-1之间  
47.         x: flick.visibleArea.xPosition * flick.width  
48.         height: 10  
49.         //当前可视区域的宽度比例,为百分比值,0-1之间  
50.         width: flick.visibleArea.widthRatio * flick.width  
51.         color: "black"  
52.     }  
53. }  
54. </span> 

可以实现翻转效果

1. import QtQuick 2.0  
2.   
3. Flipable  
4. {  
5.     id: flip  
6.   
7.     width: 300  
8.     height: 200  
9.   
10.     //定义属性  
11.     property bool flipped: false  
12.   
13.     //正面图片  
14.     front:Image  
15.     {  
16.         source: "pics/1.jpg"  
17.         anchors.centerIn: parent  
18.     }  
19.   
20.     //背面图片  
21.     back:Image  
22.     {  
23.         source: "pics/2.jpg"  
24.         anchors.centerIn: parent  
25.     }  
26.   
27.     //旋转设置,延Y轴旋转  
28.     transform: Rotation  
29.     {  
30.         id: rotation  
31.         origin.x:flip.width / 2  
32.         origin.y:flip.height / 2  
33.         axis.x: 0  
34.         axis.y: 1  
35.         axis.z: 0  
36.         angle: 0  
37.     }  
38.   
39.     //状态改变  
40.     states:State  
41.     {  
42.         name: "back"  
43.         PropertyChanges  
44.         {  
45.             target: rotation;angle:180  
46.         }  
47.         when:flip.flipped  
48.     }  
49.   
50.     //转换方式  
51.     transitions: Transition  
52.     {  
53.         NumberAnimation  
54.         {  
55.             target:rotation  
56.             properties: "angle"  
57.             duration:4000  
58.         }  
59.     }  
60.   
61.     //鼠标区域  
62.     MouseArea  
63.     {  
64.         anchors.fill: parent  
65.         onClicked: flip.flipped = !flip.flipped  
66.     }  
67. }