Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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:
    good.PNG
    Which is almost what I need. But when I uncomment the RowLayout, I get this:
    bad.PNG
    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...



  • 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'
             }
          }
       }
    }
    

  • Moderators

    @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.

    1. 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


  • Moderators

    @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?

    right.PNG

    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).`


Log in to reply