[SOLVED] QML list view change item size to fit text

Dolphin

My listview has various item text lengths - it is really a menu so needs the flexibility of re-sizing itself for possible string lengths. This is for visually impaired so flickable does not seen like a sensible option (everything needs to stay still). Wrapping works but that means the 2nd line of text is outside the item. Using paintedHeight/width does not work.

Any ideas?

daliusd

You could calculate item height from Text element (that is inside item) and thus you are safe to use wrapping.

Dolphin

Thanks for your reply. Could you possibly tell what that would look like in this code please? I cannot get it to work.

@
import QtQuick 2.0

Rectangle
{
//align menu underneath prompts in centre
height: parent.height - prompts.height
width: parent.width

Component
{
    id: menuEntryDelegate

    Rectangle
    {
        id: wrapper
        width: menuHolder.width
        height: 50
        state: ListView.isCurrentItem ? "selected" : "notselected"

        Text  //TBD keep text inside box
        {
            id: menuEntry
            font.pointSize: 20
            width: parent.width
            wrapMode: Text.WordWrap
            text: getDisplayString()
            clip: true
        }

...
...
}
}

Rectangle
{
    id: menuContainer
    width: 400
    height: (50 * 9)
    anchors.horizontalCenter: parent.horizontalCenter

    ListView
    {
        id: menuHolder
        model: menuModel
        anchors.fill: parent
        opacity: 1

        header: Rectangle
        {
            width: menuHolder.width
            height: 50
            color: "#2A51A3"

            Text //TBD txt to say inside box
            {
               id: header
               anchors.centerIn: parent

               text: coreMenu.getMenuTitle()
               font.pointSize: 20
               color: "green"
               width: parent.width
               wrapMode: Text.WordWrap
            }
        }

        delegate: menuEntryDelegate
        focus: true

        add: Transition
        {
            NumberAnimation { properties: "x,y" }
        }

        Keys.onPressed:
        {

...
...
}
}
}
}
@

daliusd

In wrapper Rectangle set height based on menuEntry height. You might want to center Text inside wrapper, as well set smaller width, specify spacing and etc.

@
Rectangle
{
id: wrapper
width: menuHolder.width
height: menuEntry.height * 1.5 + 20 // * 1.5 if you are using spacing I believe default is 1.0
state: ListView.isCurrentItem ? "selected" : "notselected"

        Text  //TBD keep text inside box
        {
            id: menuEntry
            font.pointSize: 20
            width: parent.width
            wrapMode: Text.WordWrap
            text: getDisplayString()
            clip: true
        }

@

Dolphin

Thank you :-) :-)

daliusd

I will just share another little trick I learned recently: you might want to have different height and contentHeight on Text element. contentHeight is height of text, height is how much height occupies Text element (usually it is the same but there might be situations where you would like to have height bigger than contentHeight).

Dolphin

Great thanks :-)

Any way to keep the content within the view when you scale? This is for people with visual imparement so it panning must be kept to a minimum. Wrapping occurs when you increase content or font size but not if you scale. Is the only way round that to not use the scaling but calculate everything my self (probably just increasing the font manually)????

(By scaling I mean using myThing.scale)

daliusd

I personally have not used .scale at all.