Important: Please read the Qt Code of Conduct -

Anchor an outside item to a grid element?

  • Hi there,

    is there a way to anchor an Item (outside the grid) to a specific grid element and if not how can I determine the size of a grid cell in a GridLayout that might adapt to the parents dimensions (fillWidth/fillHeight)?

    To give a bit more background I am trying to build some kind of a progress bar using a Repeater in a GridLayout with a Rectangle delegate i.e.:

        columnSpacing: 2
          property int delegateWidth
          Rectangle{ // The Lines
            color: "white"
            width: repeaterID.delegateWidth
      Rectangle{ //The circle
        color: "red"
        anchors.horizontalCenter= gridID.left
       anchors.horizontalCenterOffset = 0.5*repeaterID.delegateWidth+lineIndex*(gridID.columnSpacing+repeaterID.delegateWidth)


    I now want to anchor the red circle to a specific line. Since anchor only works on direct parents or siblings I don't see a way to anchor it directly to the repeater's child. The way I did it now is to anchor it to the GridLayout and calculate the horizontalCenterOffset for the specific lineIndex.

    However, I am not sure if this will still work when the GridLayout will adjust dynamically to the size of it's parents? Is the spacing property adjusting dynamically? Are there other properties I can use for the calculation? Or maybe there is a better way I am not seeing?

    Thanks in advance for any input!

  • Ok, to answer parts of my question:
    The (column)Spacing properties don't seem to be affected by dynamic changes. I therefore calculate the the offset dependent on the GridLayout.width as:

    gridCellSize = (gridID.width-(nCells-1)*spacing)/nCells
    offset = 0.5*gridCellSize+lineIndex*(spacing+gridCellSize) // assuming that the lines are centered in the grid cell

  • @markugra hi,
    I dit this with a Slider like this

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    import QtQuick.Templates 2.0 as T
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    property int max:150
    property int redCercleOffset:18
        T.Slider {
            id: control
            from: 0
            value: 10
            implicitWidth: 600
            implicitHeight: 26
            anchors.centerIn: parent
            handle: Rectangle {
                x: control.visualPosition * (control.width - width)
                y: ((control.height - height) / 2)+redCercleOffset
                width: 14
                height: 14
                radius: 7
                color: control.pressed ? "#f0f0f0" : "#f6f6f6"
                border.color: "red"
            background:Rectangle {
                y: (control.height - height) / 2
                height: 15
                radius: 2
                color: "gray"
                    width: b.width
                    height: b.height
                    Rectangle {
                        width: (r.width / max )-1
                        height: parent.height
                        visible: x<(h.x+h.width/2)
                        color: "red"
                        radius: 2


Log in to reply