CODEWITHSUNDEEP
qml
llm
llm

Reputation: 737

how to size rectangles(sized by its inner text) in a column to the largest text block?

i've got names of different sizes in a Column and want to size the rectangles and the outer item userNameContent based on the the biggest name in the list (without using javascript if possible)

all text rectangles should have the size of the resulting userNameContent.width so that the white gaps are gone, any idea?

enter image description here

import QtQuick 2.15

Item
{
    ListModel {
        id: userNames
        ListElement { name: "Short Username" }
        ListElement { name: "Superlong Username that is just too long" }
        ListElement { name: "Medium size Username" }
    }

    id: userNameContent

    width: column.width
    height: column.height

    Column {
        id: column
        spacing: 2
        Repeater {
            model: userNames

            Rectangle{
                color: "lightblue"

                width: theName.contentWidth+20
                //width: userNameContent.width // does not work

                height: 38

                Text{
                    id: theName
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.rightMargin: 10
                    text: model.name
                }
            }
        }
    }
}

Upvotes: 0

Views: 433

Answers (1)

folibis
folibis

Reputation: 12864

I would use the following construction:

ColumnLayout {
    anchors.centerIn: parent
    spacing: 1
    Repeater {
        model: ["aaaaa","bbbbbbbbbbbbb","cccccccc"]
        delegate: Rectangle {
            height: 30
            width: txt.width + 10
            color: "orange"
            Layout.fillWidth: true
            Text {
                id: txt
                text: modelData
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }
}

Upvotes: 1

Related Questions