QML列表视图在字体更改时显示统一的宽度

Question

我有一个简单的列表视图。我需要用户能够操纵字体大小（视觉障碍问题）。QML非常乐意为listView项计算新的宽度和高度，但由于字符串的长度不同，导致listView看起来像是堆叠不好的框。我需要的是让它看起来像一个最长字符串宽度的矩形，如果它到达窗口边缘，就会被包裹起来。我想我会使listView项目背景透明，并计算listView所在矩形的宽度，以适应更新后的字体大小。我试过几种方法来做到这一点，但都没能成功。

有线索吗？下面的代码（数据来自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

只需使用：

width: parent.width;

在代理组件中的menuItemContainer矩形元素中，填充ListView宽度。

然后添加：

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

给menuEntry Text元素一个最大大小，这样它就可以知道何时必须换行（否则它将无限向右扩展）。