Important: Please read the Qt Code of Conduct -

QML Dial is weak or I miss something?

  • I need circular dialer like QDial or QML Dial but with some mandatory features:

    • it must rotate clockwise increasing value
    • it must be "closed" - it's end must connect to start
    • it must have starting value in most top point
    • it must have notches.

    With QDial I have got almost all instead one important feature - I cannot make it's starting position on top. It always is on bottom. QWidget is not a revolvable thing... Do not suggest use QGraphicsScene for rotation - dialer must be part of other complex widget which must not be rotated. I tried QML Dial - it is revolvable as well. But I do not see ability "close" it and I do not see notches. Am I missing something in QML Dial? It looks very weak in comparison to QDial.

  • Hi @Gourmet,

    • For the clockwise rotation you need to write the logic inside onValueChanged signal,basically you need to change the value based upon its current and previous value.
    • By default the wrap is true in a Dial, so it moves from the end - start.
    • For values at the notches,just have a look at my sample code.
    • By default tickmarksVisible property is true,to customize the tickmark you just need to customize the dial using the style and DialStyle and inside DialStyle you can use the tickmark.

    Here is the sample code:-

    Dial {
            width: 200
            height: 200
            stepSize: 1
            minimumValue: 0
            maximumValue: 10
            rotation: 150
            onValueChanged: {
                //####Logic for clockwise rotation
            style: DialStyle {
                tickmark: Item {
                    height: 20
                    width: 20
                    Rectangle {
                        height: 5
                        width: 5
                        radius: 5
                        color: "red"
                        anchors.bottom: parent.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                    Text {
                        text: styleData.value
                        font.pixelSize: 10
                        anchors.horizontalCenter: parent.horizontalCenter

    Note:- If you want only the starting value then just make this change inside the text

    visible: styleData.index === 0

    Output of sample code:-


  • @Shrinidhi-Upadhyaya said in QML Dial is weak or I miss something?:

    By default the wrap is true in a Dial, so it moves from the end - start.

    Not just "wrapped" moving from end to start and back - but closed. It must be non-torn circle. End position must be at same place as start.

Log in to reply