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 Rectangle元素中，填充ListView宽度。

然后添加：

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

要menuEntry文本元素给它一个最大大小，所以它可以知道它必须包装的时间（它将无限延伸到右边）。

QML Listview在字体更改时显示统一宽度

1 个答案: