using RowLayout defeats width/wrapping.

[mzimmers]

Hi all -

I have a view with a checklist (manually created), whose text I'd like to have wrap. Here's a minimal example:

Item {
    id: root
    height: 768
    width: 1024

    Column {
        width: parent.width
        Repeater {
            model: myListModel
            RowLayout {
                Label {
                    id: checklistItemText
                    // MUST have a width for fontSizeMode to work.
                    width: root.width * 0.8
                    height: font.pixelSize * 3
                    fontSizeMode: Text.Fit
                    wrapMode: Text.Wrap
                    minimumPixelSize: 10
                    font.pixelSize: 48
                    text: modelData
                    color: 'black'
                }
            }
        }
    }
}

(I omitted the model.) This produces this:

Which is almost what I need. But when I uncomment the RowLayout, I get this:

Which is definitely not good.

The reason for the RowLayout is to put a symbol in front of each line (I've omitted this as well).

So, a couple questions:

1. why does RowLayout cause this not to work?
2. the explicit height on the Label is problematic in its own right, and under some circumstances can lead to varying font sizes in the list. Is there a better way to do this?

Thanks...

[mzimmers]

So, I managed to resolve this. Not really sure why RowLayout doesn't work, but Row seems to do OK, so I used that instead.

My assumption about what was causing the varying text size was incorrect: It wasn't the height, it was the minimumPixelSize setting. Evidently QML tries to shrink text to fit, before resorting to wrapping. By setting my minimumPixelSize to the same value as the font.pixelsize, I prevented the text resizing, which in turn forced the wrap.

Column {
   width: parent.width
   Repeater {
      model: myListModel
      Row {
         Item {
           height: checklistItemText.height
           width: checklistItemText.height
           ImageSvgHelper {
            id: checkmark_little
            anchors.fill: parent
            source: "checkmark.svg"
            fillMode: Image.PreserveAspectFit
           }
         }

         Label {
            id: checklistItemText
            // MUST have a width for fontSizeMode to work.
            width: root.width * 0.8
            height: font.pixelSize * 3
            fontSizeMode: Text.Fit
            wrapMode: Text.Wrap
            minimumPixelSize: 10
            font.pixelSize: 48
            text: modelData
            color: 'black'
         }
      }
   }
}

[sierdzio]

@mzimmers said in using RowLayout defeats width/wrapping.:

Which is almost what I need

Can you post an image (or describe in words) what is exactly the output you expect? I am not sure of it, so I also don't know what exactly to recommend you to do.

So, a couple questions:

1. why does RowLayout cause this not to work?

You don't set size of the RowLayout (width / height or anchors), so it does know it has to fit some certain dimensions.

If your Column was a ColumnLayout, this would behave differently - then each row would know how much "wiggle room" it has and setting width/ height would not be necessary.

2. the explicit height on the Label is problematic in its own right, and under some circumstances can lead to varying font sizes in the list. Is there a better way to do this?

With layouts, you can set some other properties like:

Layout.preferredHeight: something
Layout.minimumHeight: sth
Layout.maximumHeight: sth2
Layout.implicitHeight: sth3

Can't say which one exactly is the best for you, it always takes some trial and error to get it right. Or rather, most often: it takes some trial and error to get it "least wrong" :D

[sierdzio]

@mzimmers said in using RowLayout defeats width/wrapping.:

So, I managed to resolve this. Not really sure why RowLayout doesn't work, but Row seems to do OK, so I used that instead.

Nice! Thanks for sharing the solution, too!

[mzimmers]

@sierdzio said in using RowLayout defeats width/wrapping.:

Can you post an image (or describe in words) what is exactly the output you expect?

This UI has been cobbled together by many hands, and isn't necessarily the way things should be done, but given the phase of the project, I'm trying to clean things up with a minimum of impact. Apart from a hard-coded font pixelsize, I'm reasonably happy with the fix I posted above. But, I'll keep your comments in mind for the future (though I'm not really much of a fan of layouts in QML).`