QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cxc233/article/details/78699591

话不多说先上效果图一个默认效果,一个自定义效果


介绍: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

参数:

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;

        }

    }
}



-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

4、代码下载地址http://download.csdn.net/download/cxc233/10142541


展开阅读全文

没有更多推荐了,返回首页