Anchor an outside item to a grid element?

[markugra]

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.:

Item{  
  GridLayout{
    id:gridID
    columnSpacing: 2
    Repeater{
      id:repeaterID
      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!

[markugra]

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

[LeLev]

@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
        to:max

        value: 10
        implicitWidth: 600
        implicitHeight: 26
        anchors.centerIn: parent
        handle: Rectangle {
            id:h
            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 {
            id:b
            y: (control.height - height) / 2
            height: 15
            radius: 2
            color: "gray"
            Row{
                id:r
                spacing:1
                width: b.width
                height: b.height
            Repeater{
                model:max
                Rectangle {
                    width: (r.width / max )-1
                    height: parent.height
                    visible: x<(h.x+h.width/2)
                    color: "red"
                    radius: 2
                }
            }
            }
        }
    }

}

LA