Qt官方示例：UI Components: Dial Control Example

这个示例演示了一个简单的自定义仪表盘组件。

import QtQuick 2.2
import QtQuick.Window 2.1

Rectangle
{
    color: "#545454"
    width: 300; height: 300

    Dial    //自定义仪表盘
    {
        id: dial
        anchors.centerIn: parent
        value: slider.x * 100 / (container.width - 32)
    }

    //滑块的滑道
    Rectangle
    {
        id: container
        property int oldWidth: 0
        anchors
        {
            bottom: parent.bottom; left: parent.left
            right: parent.right; leftMargin: 20; rightMargin: 20
            bottomMargin: 10
        }
        height: 16

        radius: 8
        opacity: 0.7
        antialiasing: true
        gradient: Gradient
        {
            GradientStop { position: 0.0; color: "gray" }
            GradientStop { position: 1.0; color: "white" }
        }

        onWidthChanged:
        {
            if (oldWidth === 0)
            {
                oldWidth = width;
                return
            }

            var desiredPercent = slider.x * 100 / (oldWidth - 32)
            slider.x = desiredPercent * (width - 32) / 100
            oldWidth = width
        }

        //滑块
        Rectangle
        {
            id: slider
            x: 1; y: 1; width: 30; height: 14
            radius: 6
            antialiasing: 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
    }
}

主界面比较简单，上面是一个自定义的仪表盘控件，下面是一个自定义的滑道，滑道内部有个滑块，通过滑块的鼠标拖到改变滑块的水平方向。

仪表盘：

import QtQuick 2.0

Item
{
    id: root
    property real value : 0

    width: 210; height: 210

    Image
    {
        anchors.fill: parent
        source: "background.png"
    }

    //表盘指针
    Image
    {
        id: needle
        x: 98; y: 33
        antialiasing: 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//弹簧阻尼值
                }
            }
            onAngleChanged:console.log(needleRotation.angle)
        }
    }

    //表盘指针的阴影
    Image
    {
        x: 96
        y: 35
        source: "needle_shadow.png"
        transform: Rotation
        {
            origin.x: 9; origin.y: 67
            angle: needleRotation.angle
        }
    }

    //中心的罩子
    Image { x: 21; y: 18; source: "overlay.png" }
}

首先是铺上一层背景图片：

然后铺上指针图片和阴影图片：

最后铺上一层罩子，罩子上贷了一层反光：

仪表盘的自定义属性 value 和滑块的水平位置绑定了，指针图片组件的旋转角度又和 value 的值绑定了，拖到滑块则指针的旋转角度变化。

退出按钮也是图片组件：

import QtQuick 2.0
Image
{
    source: "quit.png"
    scale: quitMouse.pressed ? 0.8 : 1.0
    MouseArea
    {
        id: quitMouse
        anchors.fill: parent
        anchors.margins: -10
        onClicked: Qt.quit()
    }
}

示例中的小技巧：

1、MouseArea 中设置：

anchors.margins: -16

让鼠标区域的范围比滑块看起来的范围大一些，这是个提升易用性的小细节。

2、鼠标区域通过拖动组的属性来使滑块移到比使用鼠标事件让滑块移到更简便、代码更少。让我写估计第一时间想到的就是用鼠标事件实现😂。