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 指定することで、折り返しが必要な時期を知ることができます (それ以外の場合は右に無限に拡張されます)。

于 2013-03-27T21:04:52.443 に答える