Solved using RowLayout defeats width/wrapping.
-
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:
- why does RowLayout cause this not to work?
- 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...
-
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' } } } }
-
@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:
- 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 aColumnLayout
, this would behave differently - then each row would know how much "wiggle room" it has and setting width/ height would not be necessary.- 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
-
@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!
-
@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).`