How to auto change the width of rectangle under Repeater

James A

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

Repeater count set to 1
Expectation

Actual output

Repeater count set to 2
Expectation

Actual output

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 ?

fcarney

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.

James A

@fcarney

This helped me to fix the problem