Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Unsolved Anchor an outside item to a grid element?

    QML and Qt Quick
    2
    3
    514
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      markugra last edited by 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)
        }
      }
      

      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!

      1 Reply Last reply Reply Quote 0
      • M
        markugra last edited by 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
        
        1 Reply Last reply Reply Quote 0
        • ODБOï
          ODБOï last edited by ODБOï

          @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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post