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



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



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



  • 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:
            {
    

    ...
    ...
    }
    }
    }
    }
    @



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

    @



  • Thank you :-) :-)



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



  • 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)



  • I personally have not used .scale at all.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.