QML学习——QtQuick.Extras 1.4（七）

Quick.Controls 1.4 新增组件

import QtQuick.Extras 1.4 //扩展库

• CircularGauge

  • 一个类似仪表盘的圆形控件，用指针指示刻度；

  • CircularGauge有个CircularGaugeStyle来控制控件样式；

  • 举个例子：

    CircularGauge {
        value: accelerating ? maximumValue : 0
    
        property bool accelerating: false
    
        Keys.onSpacePressed: {
            accelerating = true //表示加速状态
        }
    
        Keys.onReleased: (event)=> {
            if (event.key === Qt.Key_Space) {
                accelerating = false;
                event.accepted = true; //以防止事件沿项目层次结构向上传播
            }
        }
    
        Component.onCompleted: forceActiveFocus()
    
        Behavior on value {
            NumberAnimation {
                duration: 1000
                easing.type: Easing.Linear
            }
        }
    
        style: CircularGaugeStyle {
            id: style
    
            function degreesToRadians(degrees) {
                return degrees * (Math.PI / 180);
            }
    
            //自己绘制刻度样式
            background: Canvas {
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();
    
                    ctx.beginPath();
                    ctx.strokeStyle = "yellow";
                    ctx.lineWidth = outerRadius * 0.02;
    
                    ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
                            degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90));
                    ctx.stroke();
                }
            }
    
            //大刻度
            tickmark: Rectangle {
                visible: styleData.value < 80 || styleData.value % 10 == 0
                implicitWidth: outerRadius * 0.02
                antialiasing: true
                implicitHeight: outerRadius * 0.06
                color: styleData.value >= 80 ? "#e34c22" : "cadetblue"
            }
    
            //小刻度
            minorTickmark: Rectangle {
                visible: styleData.value < 80
                implicitWidth: outerRadius * 0.01
                antialiasing: true
                implicitHeight: outerRadius * 0.03
                color: "cadetblue"
            }
    
            //刻度下的文字
            tickmarkLabel:  Text {
                font.pixelSize: Math.max(6, outerRadius * 0.1)
                text: styleData.value
                color: styleData.value >= 80 ? "#e34c22" : "cadetblue"
                antialiasing: true
            }
    
            //指针
            needle: Rectangle {
                y: outerRadius * 0.15
                implicitWidth: outerRadius * 0.03
                implicitHeight: outerRadius * 0.9
                antialiasing: true
                color: "cadetblue"
            }
    
            //中心的圆心组件
            foreground: Item {
                Rectangle {
                    width: outerRadius * 0.2
                    height: width
                    radius: width / 2
                    color: "darkslategray"
                    anchors.centerIn: parent
                }
            }
        }
    }
    

  • 

  • 左边是自定义样式的表盘，右边则是默认的；

• DelayButton

  • 

  • 延时按钮，可设置从按下开始到真正执行的时间延迟；

  • 释放按钮外圈有一层指示器，可直观的表示时间延迟；

  • 提供DelayButtonStyle来控制该组件样式；

• Dial

  • 仪表盘调节器，类似CircularGauge的传统风格旋钮；
  • 提供DialStyle来控制该组件的样式；
  • 

• Gauge

  • 显示一定数值范围的垂直或水平刻度器；

  • 

  • 提供GaugeStyle来控制该组件的样式；

• Picture

  • 以矢量格式显示图标图片，可以用color属性给图标上色；
  • 使用source属性指定路径或QPicture数据；例如：source : "mypicture.dat"
  • 该组件无样式控制Style；

• PieMenu

  • 饼状菜单：

  • 

  • 提供PieMenuStyle自定义该控件样式；

• StatusIndicator

  • 状态指示器：

  • 

  • 提供StatusIndicatorStyle来控制该组件样式；

• ToggleButton

  • 两种状态的切换按钮：

  • 

  • 提供ToggleButtonStyle来控制该控件样式；

• Tumbler

  • 用上下滚动的方式选择一个值，每一列都可以上下拖动：

  • 

  • 提供TumblerStyle来控制该控件样式；

  • 每一列通过TumblerColumn组件来设置具体数值；