1

我有一个简单的列表视图。我需要用户能够操纵字体大小（视觉障碍问题）。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()
        }
    }
}

}@

4

1 回答 1

2

只需使用：

width: parent.width;

在menuItemContainer委托组件中的 Rectangle 元素中，填充 ListView 宽度。

然后添加：

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

给menuEntry Text 元素设置一个最大尺寸，这样它就可以知道它什么时候必须换行（否则它将无限向右延伸）。

于 2013-03-27T21:04:52.443 回答