QML Listview display uniform width when font changed

Question

I have a simple list view. I need the user to be able to manipulate the font size (visual impairment issues). QML quite happily calculates new width and height for the listView items but since the strings are different lengths that leads to listView that looks like badly stacked boxes. What I need is for it to look like a rectangle the width of the longest string and wrap if it reaches the edge of the window. I figure I make the listView item backgrounds transparent and calculate the width of the rectangle the listView is in to fit the updated font size. I have tried a few ways to do this and have not managed to make it work.

Any clues? code below (data coming from c++)

import QtQuick 2.0

Rectangle
{
id: theMenu
property double fontSize: menuManager.menuFontPointSize
property double menuWidth: menuManager.menuItemHeight
Component
{
    id: menuEntryDelegate

    Rectangle
    {
        id: menuItemContainer
        width: menuEntry.width
        height: menuEntry.height * 1.25
        anchors.top: prompts.bottom
        property double fontSize: theMenu.fontSize

        state: ListView.isCurrentItem ? "selected" : "notselected"

        Text
        {
            id: menuEntry
            font.pointSize: fontSize
            //width: parent.width
            wrapMode: Text.WordWrap
            text: displayText
            clip: true
        }

        MouseArea
        {
            hoverEnabled: false
            anchors.fill: parent
            onClicked: menuHolder.currentIndex = index
            onDoubleClicked: menuManager.displayMenu(menuHolder.currentIndex)
        }

        states:
        [
            State
            {
                name: "selected"
                PropertyChanges
                {
                    target: menuItemContainer
                    color: "#FAFCD9"
                }
                PropertyChanges
                {
                    target: icon
                    source: iconUrl
                }
                PropertyChanges
                {
                    target: prompts
                    text: getPrompt()
                }
                PropertyChanges
                {
                    target: menuEntry
                    color: "black"
                }
            },

            State
            {
                name: "notselected"
                PropertyChanges
                {
                    target: menuItemContainer
                    color: "black"
                }
                PropertyChanges
                {
                    target: menuEntry
                    color: "white"
                }
            },
            State
            {
                name: "hidden"
                PropertyChanges
                {
                    target: menuItemContainer
                    color: "green"
                }
            }

        ]

    }
}

Rectangle
{
    id: menuContainer
    width: menuManager.menuWidth
    height: (50 * 9) //TBD
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: prompts.bottom
    color: "purple"
    ListView
    {
        id: menuHolder
        model: menuModel
        anchors.fill: parent
        opacity: 1

       /* header: Rectangle
        {
            TextBox {}
    }*/
        header: Rectangle
        {
            width: menuHolder.width
            height: 50
            color: "#2A51A3"


           Text
            {
               id: header
               anchors.centerIn: parent

               text: "FIX" + currentMenu.displayText
               font.pointSize: currentMenu.fontPointSize
               color: "green"
               width: parent.width
               wrapMode: Text.WordWrap
            }
        }

        delegate: menuEntryDelegate
        focus: true

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

        Keys.onPressed:
        {
            if(event.key === Qt.Key_F1)
            {
                theMenu.z = -1
            }
            else if(event.key === Qt.Key_F3)
            {
                theMenu.z = 1
            }
            else if(event.key === Qt.Key_F2)
            {
                menuManager.menuFontPointSize *= menuManager.scale
                theMenu.fontSize = menuManager.menuFontPointSize

            }
            else if(event.key === Qt.Key_F10)
            {
                scaleFactor -= 0.1
                menuContainer.scale = scaleFactor
                promptsContainer.scale = scaleFactor
                //promptsContainer.z = 1
            }
            else if(event.key === Qt.Key_Right)//zoom in
            {
                menuContainer.x +=10
            }
            else if(event.key === Qt.Key_Left)//zoom out
            {
                menuContainer.x -=10
            }
            else if(event.key === Qt.Key_Home)//go back to Main menu
            {
                menuManager.displayMainMenu();
                theMenu.fontSize = menuManager.menuFontPointSize
            }
            //Ways to select a menu item
            else if((event.key >= Qt.Key_1 && event.key <= Qt.Key_9)
                    || event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
            {
                if(event.key >= Qt.Key_1 && event.key <= Qt.Key_9)
                {
                    menuHolder.currentIndex = event.key  - Qt.Key_1;
                }
                menuManager.displayMenu(menuHolder.currentIndex);
                theMenu.fontSize = menuManager.menuFontPointSize
            }
            menuEntryDelegate.updateIcon()
        }
    }
}

}@

TheBootroo TheBootroo · Accepted Answer · 2013-03-27T21:04:52

Just use :

width: parent.width;

In menuItemContainer Rectangle element in your delegate component, to fill the ListView width.

And then add :

anchors { left: parent.left; right: parent.right }

To menuEntry Text element to give it a max size, so it can know when it must wrap (it will extend to the right infinitely else).

QML Listview display uniform width when font changed

1 Answers