话不多说先上效果图一个默认效果，一个自定义效果
介绍：Dial是Qt5.5开始加入的，包含于import QtQuick.Extras 1.4
应用：万能遥控的温度、声音的控制、以及其他工业仪表盘等等
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
1、基本参数：
activeFocusOnPress : bool
//设置按下时是否改变焦点
hovered : real
//（只读参数）如果在控件范围内返回true
maximumValue : real
//设置仪表的最大值
minimumValue : real
//设置仪表的最小值
pressed:bool
//设置当前状态是否按下
stepSize : real
//设置一次改变的值
style : Component
//通过DialStyle自定义样式（后面有介绍）
tickmarksVisible : bool
//是否显示刻度
value : real
//当前值（默认值）
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
2、自定义风格(DialStyle)：需要导入QtQuick.Controls.Styles 1.4 QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)
参数：
background : Component
//背景
control : Dial
//指定控件对象
handle : Component
//旋钮
handleInset : real
//旋钮离圆弧的距离
labelCount : int
//(只读)返回刻度的数量
labelInset : real
//刻度离圆弧的距离
labelStepSize : real
//设置一个刻度的大小
minorTickmark : Component
//最小刻度的风格（tickmark直接的刻度）
//3种刻度都可以用styleData.index返回刻度的序号；StyleData.value返回刻度对应的数值
minorTickmarkCount : int
//设置2个大刻度之间小刻度的数量
minorTickmarkInset : real
//小刻度离圆弧的距离
outerRadius : real
//（只读）半径
tickmark : Component
//刻度风格/
tickmarkCount : int
//（只读）刻度遮罩的数量
tickmarkInset : real
//刻度遮罩离圆弧的距离
tickmarkLabel : Component
//刻度遮罩的风格
tickmarkStepSize : real
//刻度遮罩之间的值
还有一个方法：
real valueToAngle(real value)
//通过值返回角度可以用来画外面的圆弧 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------
3、下面用一段代码介绍具体用法
import QtQuick 2.2
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
Dial {
id:dial;
Text {
anchors.centerIn: parent;
id: value_text;
color:"white";
font.family: "方正兰亭超细黑简体";
font.bold: true;
font.pixelSize: 60;
text: dial.value.toString();
}
tickmarksVisible:true;
stepSize: 0.5; //拨动一次的大小
maximumValue: 31;
minimumValue: 16;
width: 200;
height: 200;
style: DialStyle {
id:d_style;
//outerRadius只读参数（半径大小）
一个大刻度之间的小刻度
minorTickmarkCount:10 //大刻度之间小刻度数量
minorTickmarkInset:0; //距离外径（outerRadius）的距离（正时向内靠近）
minorTickmark:Rectangle{
color:"blue";
implicitWidth: 5; //大小有固定需要用implicitWidth才能改变
implicitHeight: 5;
radius: implicitWidth/2;
MouseArea{
anchors.fill: parent;
onClicked: {
console.log("value"+styleData.value);//点击刻度读取刻度对应的值
console.log("index"+styleData.index);//点击刻度读取刻度对应的序号
console.log(valueToAngle(styleData.value))//值对应的角度
}
}
}
/刻度（小刻度的分割点）
tickmark:Rectangle{
implicitWidth: 10;
implicitHeight: 10;
color: "yellow";
radius: implicitWidth/2;
MouseArea{
anchors.fill: parent;
onClicked: {
console.log("value"+styleData.value);//点击刻度读取刻度对应的值
console.log("index"+styleData.index);//点击刻度读取刻度对应的序号
console.log(valueToAngle(styleData.value))//计算值对应的角度可以用来绘画外面的圆圈
}
}
}
tickmarkInset: -5; //距离外径（outerRadius）的距离（正时向内靠近）
tickmarkStepSize:2; //和tickmarkCount（只读）对应
//tickmarkCount = （maximumValue-minimumValue）/ tickmarkStepSize
//刻度
tickmarkLabel:Rectangle{
color: "red";
implicitWidth: 5;
implicitHeight: 5;
radius: implicitWidth/2;
}
labelStepSize :2;
labelInset:-10;
转动时的旋钮
handle :Rectangle{
color:"green";
height: 20;
width: 20;
radius: width/2;
}
背景
background: Rectangle{
color:"gray";
radius: width/2;
}
}
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------