Question

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

我试过了：

    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
            }
        }
    }
}

但是它非常不精确，因为我需要准确地告诉哪个数字开始（并结束）绿色，红色和黄色（我暂时没有画出黄色）。

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

Answer 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
            }
        }
    }
}

QML样式量表

1 个答案: