QML之表盘

今天学一个类似于表盘组件的Example，IBM开发了一套Flex的组件库TourDeFlex中就有这样的组件，但是功能比这个强大多了。

先看下效果图：

 

 

//Dial.qmlimport Qt 4.7Item { id: root property real value: 0 width: 210; height: 210 Image { source: "background.png"} Image { //指针阴影 x: 96; y: 35 source: "needle_shadow.png" transform: Rotation { origin.x: 9; origin.y: 67 angle: needleRotation.angle } } Image { //指针 id: needle x: 98; y: 33 smooth: true source: "needle.png" transform: Rotation { //变换指针角度 id: needleRotation origin.x: 5; origin.y: 65 angle: Math.min(Math.max(-130, root.value * 2.6 - 130), 133) Behavior on angle {SpringAnimation { spring: 1.4; damping: 0.15 } //弹性效果 } } } Image { x: 21; y: 18; source: "overlay.png"} //中间园点}

 

//QuitButton.qmlimport Qt 4.7Image { source: "quit.png" scale: quitMouse.pressed ? 0.8 : 1.0 //缩放 smooth: quitMouse.pressed MouseArea { id: quitMouse anchors.fill: parent anchors.margins: -10 onClicked: Qt.quit() }}

//dialcontrol.qmlimport Qt 4.7import "content"Rectangle { color: "#545454" width: 300; height: 300 Dial { id: dial anchors.centerIn: parent value: slider.x * 100 / (container.width -34) //用于控制组件的角度 } Rectangle { id: container anchors { bottom: parent.bottom; left: parent.left; right: parent.right leftMargin: 20; rightMargin: 20; bottomMargin: 10 } height: 16 radius: 8 opacity: 0.7 smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "gray" } GradientStop { position: 1.0; color: "white" } } Rectangle { id: slider x: 1; y: 1; width: 30; height: 14 radius: 6 smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "#424242" } GradientStop { position: 1.0; color: "black" } } MouseArea { anchors.fill: parent anchors.margins: -16 drag.target: parent; drag.axis: Drag.XAxis drag.minimumX: 2; drag.maximumX: container.width -32 } } } QuitButton { anchors.right: parent.right anchors.top: parent.top anchors.margins: 10 }}