Using ColumnLayout breaks Label wrap/resize

[mzimmers]

Hi all -

Working with a QML view that goes like this:

ColumnLayout {
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.fill: parent

    Label { id: heading ... }
    Label {
      id: subHeading
      Layout.alignment: Qt.AlignHCenter
      text: changeConsumablesViewModel.posterModalSubHeading;
      font: Theme.plateLabelLargeFont;
    //          fontSizeMode: Text.Fit;
    //          minimumPixelSize: 10;
    //          font.pixelSize: 72;
      color: Theme.neutralLightest
      wrapMode: Text.Wrap
    }
    Column { id: checklist }
    ...

Which produces this:

Everything is supposed to be centered, and in fact is centered if the text doesn't exceed a certain (currently unknown to me) length. My attempts to wrap (and I included a width) didn't work, so I tried the fontSizeMode setting (shown in the commented code above), and got this disaster:

Can someone tell me why this isn't resizing the subheading to fit in the window? Thanks...

[VStevenP]

Please see the documentation for WrapMode for Text and Label.

Here's an excerpt:

wrapMode : enumeration
Set this property to wrap the text to the Text item's width. The text will only wrap if an explicit width has been set. wrapMode can be one of:

[mzimmers]

@VStevenP as mentioned above, I did include a width setting when I tried wrapping. I just tried it again. Here's the code:

Label {
  Layout.alignment: Qt.AlignHCenter
  text: changeConsumablesViewModel.posterModalSubHeading;
  font.pointSize: 36.0
  width: 640
  wrapMode: Text.Wrap
}

And here's the result:

So, something else I'm doing (or not doing) is interfering with the wrapping.

[mzimmers]

Update: by process of elimination, I traced the cause to my use of ColumnLayout. Changing topic title accordingly.

EDIT: So, it appears that the missing ingredient was a Layout.preferredWidth:

Label {
    Layout.alignment: Qt.AlignHCenter
    text: changeConsumablesViewModel.posterModalSubHeading
    width: parent.width * 0.9
    Layout.preferredWidth: width
    fontSizeMode: Text.Fit
    minimumPixelSize: 18
    font.pixelSize: Theme.plateLabelLargeFont.pixelSize
    wrapMode: Text.Wrap
  }

produces this:

I didn't realize that I needed to apply Layout properties to the individual elements of a Layout; but evidently I did.