Search code examples
qmlqt6

Qt6 Linear gauge Issue

I have a requirement to implement a control as shown in the attachment in Qt6-QML.

I knew Qt 6.x does not support gauge component and Qt does not have plans to release in future. So, some one please suggest me how can I implement below qml component in Qt 6.x? enter image description here

Solution

  • You can customize a Slider to make it look like a Gauge. Below is a rough demonstration:

    import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    ColumnLayout {
        anchors.centerIn: parent
        CustomGuage {
            id: slider
            Layout.alignment: Qt.AlignHCenter
            from: 0
            to: 100
            value: 50
            stepSize: 2
        }
        Frame {
            Layout.alignment: Qt.AlignHCenter
            Text {
                text: qsTr("value: %1").arg(slider.value)
            }
        }
    }
}

// CustomGuage.qml
import QtQuick
import QtQuick.Controls

Slider {
    implicitWidth: 100
    implicitHeight: 300
    width: implicitWidth
    height: implicitHeight
    from: 0
    to: 100
    value: 5
    orientation: Qt.Vertical
    background: Rectangle {
        color: "black"
        Rectangle {
            x: parent.width * 3 / 4
            y: topPadding
            width: availableWidth / 4
            height: availableHeight
            color: "steelblue"
        }
        Rectangle {
            x: parent.width * 3 / 4
            y: topPadding
            width: availableWidth / 4
            height: availableHeight * visualPosition
            color: "grey"
        }
        Repeater {
            model: 50 + 1
            Rectangle {
                x: parent.width * 3 / 4 - width - 4
                y: topPadding + (availableHeight-1) * index / 50
                width: 10
                height: 1
                color: "white"
            }
        }
        Repeater {
            model: 10 + 1
            Rectangle {
                x: parent.width * 3 / 4 - width - 4
                y: topPadding + (availableHeight-1) * index / 10
                width: 20
                height: 1
                color: "white"
            }
        }
        Repeater {
            model: 10 + 1
            Text {
                x: parent.width * 2 / 4 - width - 4
                y: topPadding + (availableHeight-1) * index / 10
text: 100 - index * 10
                color: "white"
            }
        }
    }
}

    You can Try it Online!

    For more information on customizing sliders, check out: