話不多說先上效果圖一個預設效果，一個自定義效果
介紹：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;
}
}
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------