Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Gauge strange margin and labels problems



  • I noticed strange Gauge behavior when scaling it.

    when it is big enough its look is acceptable:
    Screenshot from 2021-10-08 12-41-12.png

    but when smaller it gets margin from the left side:
    Screenshot from 2021-10-08 12-40-12.png

    also as you can see the labels are not centered vertically to tickmarks.

    How can it be fixed?

    My code:

    Gauge {
        Rectangle{
            anchors.fill: parent
            color: "transparent"
            border.color: "red"
        }
    
        value: 10
    
        implicitHeight: barHeight
        implicitWidth: barWidth //both width and height depend on the screen size example: width: screen.width / 6
    
        style: GaugeStyle {
            valueBar: Rectangle {
                implicitWidth: control.implicitWidth * (1/3)
                color: "green"
            }
    
            minorTickmark: Item {
                implicitWidth: control.implicitWidth * (1/3) * (1/4)
                implicitHeight: 1
    
                Rectangle {
                    color: "#cccccc"
                    anchors.fill: parent
                    anchors.leftMargin: 2
                    anchors.rightMargin: 4
                }
            }
    
            tickmark: Item {
                implicitWidth: control.implicitWidth * (1/3) * (1/2)
                implicitHeight: 1
    
                Rectangle {
                    color: "#c8c8c8"
                    anchors.fill: parent
                    anchors.leftMargin: 3
                    anchors.rightMargin: 3
                }
            }
    
            tickmarkLabel:  Text {
                font.pixelSize: control.implicitWidth * 0.1
                text: styleData.value
                color: "#e5e5e5"
                antialiasing: true
            }
        }
    }