QML_Dial和Switch

QML_Dial和Switch

概述： 拨盘旋钮类似于立体声或工业设备等设备上的传统拨盘旋钮。它允许用户在一个范围内指定一个值。这样一看，它的功能似乎和之前的滑块Slider相似。但是，Dial的效果更加立体，更接近现实载体上的旋钮。其刻度盘的值通过value属性设置。范围是使用from和to属性设置的。要启用或禁用换行，请使用wrap属性
属性
angle : 可设置保持手柄的角度
from : 保存范围的起始值。默认值为0.0
handle : 保存转盘的手柄
live : 保存在拖动手柄时拨盘是否为value属性提供实时更新
position : 保存句柄的逻辑位置
pressed : 保存是否按下拨盘
snapMode : 保存捕捉模式
stepSize : 保存步长
to : 保存范围的最终值。默认值为1.0
value : 保存值在from-to范围内。默认值为0.0
wrap : 保存在拖动时是否绕转盘
信号
moved()： 当用户通过触摸，鼠标或按键以交互方式移动了转盘时，将发出此信号
方法
decrease()：将值减小stepSize（未设置则减小0.1）
increase()： 将值增大stepSize（未设置则增大0.1）

简单地使用

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("ColorDialog")

    Dial {
        id: dial
        from: 0  //开始值
        to: 100  //结束值
        stepSize: 1
        anchors.centerIn: parent

        Keys.onTabPressed: {
            dial.decrease()
        }

        onValueChanged: {
            console.log(dial.value)
        }
    }
}

自定义控件的代码来参考。Dial有两个可视化项，background(背景项)和handle(手柄项)。背景项很容易设置，和上节一样，设置一个圆形。注意哦，现在不是圆环了。比较难理解的是手柄项的设置，原先的手柄项是一个小三角形，下面的代码将其设置为圆形，不需要画布项目，但是需要注意的是这个起始位置x、y的设置。

Dial{
    id: dial
    anchors.centerIn: parent

    background: Rectangle {
        id:rect
        width: 200
        height: width
        color: Qt.rgba(0,0,0,0)
        radius: width / 2
        border.color: dial.pressed ? "orange" : "green"
    }

     handle: Rectangle {
         id: handleItem
         x: dial.background.x + dial.background.width / 2 - width / 2
         y: dial.background.y + dial.background.height / 2 - height / 2
         width: 16
         height: 16
         color: dial.pressed ? "orange" : "green"
         radius: 8
         transform: [
             Translate {
                 y: -Math.min(dial.background.width, dial.background.height) * 0.4 + handleItem.height / 2
             },
             Rotation {
                 angle: dial.angle
                 origin.x: handleItem.width / 2
                 origin.y: handleItem.height / 2
             }
         ]
     }
}

控件滑动开关 Switch
开关是一个选项按钮，可以在打开（选中）或关闭（未选中）上拖动或切换。开关通常用于在两种状态之间进行选择。对于较大的选项集，可以考虑改用SwitchDelegate。
属性
position : 保存滑动指示器的逻辑位置
visualPosition : 保留滑动指示器的视觉位置

Switch {
    anchors.centerIn: parent

    onCheckedChanged: {
        console.log(position)
    }
}

Switch有三个可视化项，还是熟悉的background背景, contentitem内容和indicator指示器。

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("ColorDialog")

    Switch {
        id: root
        anchors.centerIn: parent

        indicator: Rectangle {
            width: 80
            height: 40
            radius: height / 2
            color: root.position ? "green" : "gray"
            border.width: 2
            border.color: "blue"

            Rectangle {
                x: root.checked ? parent.width - width - 1 : 1
                width: parent.height - 2
                height: width
                radius: width / 2
                anchors.verticalCenter: parent.verticalCenter
                color: "white"
            }
        }

        onCheckedChanged: {
            console.log(position)
        }
    }
}