QML 风格仪表答案

【问题标题】：QML style GaugeQML 风格仪表
【发布时间】：2017-11-30 22:31:03
【问题描述】：

我需要将仪表分成几个部分：红色、黄色和绿色。

我试过了：

    Gauge {
    id: gauge
    anchors.top: parent.top; anchors.topMargin: 20; anchors.horizontalCenter: parent.horizontalCenter
    width: parent.width - 20
    minimumValue: -500
    maximumValue: 500
    value: 200
    tickmarkStepSize: 100
    orientation: Qt.Horizontal
    font.bold: true; font.pixelSize: 12
    style: GaugeStyle {
        background: Rectangle {
         implicitWidth: 15
         implicitHeight: gauge.width
         color: "red"
         Rectangle {
             implicitWidth: 15
             implicitHeight: gauge.width/2
             anchors.verticalCenter: parent.verticalCenter
             color: "green"
         }
        }
        valueBar: Rectangle {
            implicitWidth: 15
            color: "transparent"; border.color: "black"
        }

        tickmark: Item {
            implicitHeight: 1; implicitWidth: 15
            Rectangle {
                color: "black"
                anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3
            }
        }
        minorTickmark: Item {
            implicitWidth: 8; implicitHeight: 1
            Rectangle {
                color: "lightGrey"
                anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3
            }
        }
    }
}

但这非常不精确，因为我需要准确地知道从哪个数字开始（和结束）绿色、红色和黄色（我暂时没有画黄色）。

此外，我还需要设置 valuebar 的样式（它应该是一个与背景矩形颜色相同但颜色更深的矩形），或者，如果不可能，我应该在实际值所在的位置放置一个粗标记。

【问题讨论】：

标签： qt styles qml gauge

【解决方案1】：

这有点 hacky，但您可以将前景用作值栏。这样的事情会起作用：

Gauge {
    id: gauge
    width: 400
    minimumValue: -500
    maximumValue: 500
    value: 200
    tickmarkStepSize: 100
    orientation: Qt.Horizontal
    font.bold: true;
    font.pixelSize: 12

    // Must be sorted in descending order
    property var steps: [
        {start:500, color: "green"},
        {start:0, color: "yellow"},
        {start:-240, color: "red"},
    ]

    style: GaugeStyle {
        foreground: Item {
            clip: true

            Rectangle
            {
                width: parent.width
                opacity: 0.8
                z: 1
                anchors.top: parent.top
                height: (1-(gauge.value-gauge.minimumValue)/(gauge.maximumValue-gauge.minimumValue))*parent.height
            }

            Repeater
            {
                model: control.steps
                Rectangle
                {
                    color: modelData.color
                    width: parent.width
                    y: (1-(modelData.start-gauge.minimumValue)/(gauge.maximumValue-gauge.minimumValue))*parent.height
                    height: parent.height
                }
            }

        }
        valueBar: Item {
            implicitWidth: 15
        }

        tickmark: Item {
            implicitHeight: 1; implicitWidth: 15
            Rectangle {
                color: "black"
                anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3
            }
        }
        minorTickmark: Item {
            implicitWidth: 8; implicitHeight: 1
            Rectangle {
                color: "lightGrey"
                anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3
            }
        }
    }
}

【讨论】：