qml 拨盘旋钮Dial 控件滑动开关Switch

拨盘旋钮 Dial

• 属性
  angle : 可设置保持手柄的角度
  from : 保存范围的起始值。默认值为0.0
  handle : 保存转盘的手柄
  live : 保存在拖动手柄时拨盘是否为value属性提供实时更新
  position : 保存句柄的逻辑位置
  pressed : 保存是否按下拨盘
  snapMode : 保存捕捉模式
  stepSize : 保存步长
  to : 保存范围的最终值。默认值为1.0
  value : 保存值在from-to范围内。默认值为0.0
  wrap : 保存在拖动时是否绕转盘 启用或禁用换行

• 方法
  decrease()：将值减小stepSize（未设置则减小0.1）
  increase()： 将值增大stepSize（未设置则增大0.1）

• 信号
  moved()： 当用户通过触摸，鼠标或按键以交互方式移动了转盘时，将发出此信号

• 例1
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
//import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 360
    height: 360
    title: qsTr("Image")
    color: "lightyellow"

    Dial{
        id: dial
        anchors.centerIn: parent
        stepSize: 0.2

        Keys.onTabPressed: {
          dial.decrease()
        }
    }
}

• 例2 自定义Dial
• Dial有2个可视化控件：background(背景项)、handle(手柄项)
  手柄由小三角形改为圆形，背景项设置为圆形
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
//import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 360
    height: 360
    title: qsTr("Image")
    color: "lightyellow"

    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 {    //不更改其x或y属性的情况下移动项目的方法 沿y轴平移
                     y: -Math.min(dial.background.width, dial.background.height) * 0.4 + handleItem.height / 2
                 },
                 Rotation { //旋转角度angle为我们移动手柄的角度。在设置旋转的原点即为手柄小球的中心。
                     angle: dial.angle
                     origin.x: handleItem.width / 2
                     origin.y: handleItem.height / 2
                 }
             ]
         }
    }
}

控件滑动开关 Switch

• 开关按钮，处于2种状态之间选择。较大的选项集，可以用SwitchDelegate
• 属性
  position : 保存滑动指示器的逻辑位置
  visualPosition : 保留滑动指示器的视觉位置
• Switch有3个可视化项：background背景、contentitem内容、indicator指示器
• 例1
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 360
    height: 360
    title: qsTr("Image")
    color: "lightyellow"

    Switch{
        anchors.centerIn: parent
    }
}

• 例2

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 360
    height: 360
    title: qsTr("Image")
    color: "lightyellow"

    Switch {
        id: root
        anchors.centerIn: parent

        indicator: Rectangle {  //设置可视项指示器 一个椭圆包裹着一个小球做x轴的平移
            width: 80
            height: 40
            radius: height / 2
            color: "blue"
            border.width: 2
            border.color: "blue"

            Rectangle {
                //只改变x轴 当开关被按下时，小球向右运动，x的坐标变为父矩形的宽度减去自身宽度，这里再减去1是为了不完全贴近开关的右侧
                x: root.checked ? parent.width - width - 1: 1
                width: parent.height - 2    //这样使得小球被包裹在父矩形内部，同样也留出了2px的空隙
                height: width
                radius: width / 2
                anchors.verticalCenter: parent.verticalCenter
                color: "white"
            }
        }
    }
}