Resize rectangle depending on whether text wraps or not QML

Question

So I have a rectangle with a label text inside. If the text is too long to fit in one single line, I want to increase the size of the rectangle which should otherwise remain the same.

So far I tried using lineCount, clip, truncated properties from the qt docs-

The text doesn't fit, and I get ellipses. However, Clip and Truncated always return false. Line count just returns the current line count ignoring wheter it should take more space or not.

Now I'm trying to use contentWidth from here. However this always returns a value that is equal or lesser than the actual width. I thought this should return the total value that it should occupy?

How can I accomplish this?

EDIT

I'm trying something like this, but no matter how long my text is or how truncated it is the content width is always smaller than the width of the label. I got the impression from the qml documentation that contentWidth will take into account even the omitted text.

Rectangle{
  id: rec
  ...
  Label{
    id: messageText
    height: Format.singleLine
    text: "this text is very long and should be two lines"
    Component.onCompleted: {
      if (contentWidth > width){
        rec.height = Format.multipleLines
      }
    }
  }
}

SECOND EDIT

I learned that the reason why lineCount was always one was due to creating the object programatically (myRectangle is the rectangle containing the label):

    messages.source = Qt.resolvedUrl("myRectangle.qml");
    messages.item.message = message;

After the first line the Label was created label was intiliazed with lineCount 1. Then I'll try to change the text which will only be truncated after this point.

Answer 1

How about something like this:

height: lineCount > 1 ? Format.multipleLines : Format.singleLine

Answer 2

If your Rectangle contains only your Label, you could do something like this relying on the wrapMode property of the Label, and the childrenRect.height property of the Rectangle.

Rectangle {
    anchors.centerIn: parent
    width: 200
    height: childrenRect.height
    border.width: 1

    Label {
        id: messageText
        width: 200
        wrapMode: Text.Wrap
        text: "This text is very long very long. Like way too long to fit on a single line."
    }
}

Alternatively, if you don't mind having your label contain the rectangle instead as the other way around, you could do:

Label {
    id: messageText
    anchors.centerIn: parent
    width: 200
    wrapMode: Text.Wrap
    text: "This text is very long very long. Like waaaaay too long to fit on a single line."

    Rectangle {
        anchors.fill: parent
        z: -1
        border.width: 1
    }
}

Answer 3

I'm not sure if there is a better way to do this, but this code did it for me (this is inside Label):

   onContentWidthChanged: {
        if((lineCount === 1) && (contentWidth !== 0)){
            rec.height = Format.singleLine;
        }
        else{
            rec.height = Format.multipleLines;
        }
    }

I initialized the height to be Format.multipleLines. Then once the text is accounted for (ContentWidth is not 0) I check if lineCount is one. If so I modify the height to be be format.singleLine.

Note that onContentWidth gets call twice after the component is created. The first time contentWidth will always be 0 (hence the need to check for it).