QML Listview display uniform width when font changed - c++

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()
}
}
}
}#

Answer 1

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