Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to auto change the width of rectangle under Repeater
Forum Updated to NodeBB v4.3 + New Features

How to auto change the width of rectangle under Repeater

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 801 Views 2 Watching
  • 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.
  • J Offline
    J Offline
    James A
    wrote on last edited by
    #1

    I want to automatically change the rectangle width under the repeater as shown below

    Repeater count set to 1
    Expectation
    ca54b580-0c20-4393-a498-47a1ddcc3eee-image.png

    Actual output
    69e62040-ff16-4a2e-b3ea-1b3acb8865ec-image.png

    Repeater count set to 2
    Expectation
    0ed0380d-fab0-4da3-8c0b-4b4ce3d2e8a7-image.png
    Actual output
    8f5818ca-1127-42c1-a3ee-887d2c15fac3-image.png

    Code

    import QtQuick 2.4
    import QtQuick.Layouts 1.0
    
    Item {
    
        id : root
        Rectangle{
            id : rect
            border.color: "black"
            anchors.fill: root
    
            RowLayout {
                id: row
                anchors.fill: rect
    
                spacing: 20
                Repeater{
                    id : repeater
                    anchors.fill: row
                    model : 2
    
                    Rectangle {
                        id: rectangle
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                        width: 100
                        height: 200
                        color: "#a71c1c"
                        Text {
                            id: name
                            text: (rectangle.width )
                        }
                    }
                }
            }
    
        }
    
    
    }
    

    In the above code the rectangle width is set to 100 , but how to change the rectangle width automatically as the repeater count ?

    1 Reply Last reply
    0
    • fcarneyF Offline
      fcarneyF Offline
      fcarney
      wrote on last edited by
      #2

      https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#fillWidth-attached-prop

      Rectangle {
          Layout.fillWidth: true
          // get rid of fixed width
      }
      

      If the item is in a repeater then it should parent itself to the RowLayout. If not, you can explicitly parent the Rectangle to the RowLayout.

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      1
      • J Offline
        J Offline
        James A
        wrote on last edited by
        #3

        @fcarney

        This helped me to fix the problem

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved