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

    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)
      }
    }
    

    0_1517419025914_81a88bb4-9384-4758-975e-cfb1f7f6d28a-image.png

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.