拨盘旋钮 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"
}
}
}
}