在游戏菜单中列出项目包装

时间:2017-04-02 17:07:08

标签: list qt user-interface menu qml

我试图通过将自己包裹在自身周围来获得带有游戏物品列表的无限滚动效果,所以如果你继续按下它会顺利地回绕到第一个项目。

我试图获得的效果就像这里的图像,其中列出的菜单项没有中断。 Dance Dance Revolution Menu

我目前在Qt Quick QML中这样做,但我认为它可能是代码agnogstic。我也试图不通过移动列表中的项目索引来移动,只是移动对象的Y位置。

这是我目前的代码(只是一个正常的列表定位)

Text
{
    id:root
    //clip: true
    property int spacing
    property int currentIndex
    property int selectedIndex
    property int maxIndex

    property int difference: Math.min(selectedIndex - currentIndex, maxIndex-currentIndex)
    width: 500

    x:  -400 + 30 * Math.abs(difference)
    y: (currentIndex- selectedIndex) * spacing

    Behavior on x { NumberAnimation { duration: 500 } }
    Behavior on y { NumberAnimation { duration: 500 } }
}

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

所以我的朋友给我发了一个关于如何进行我需要的包装的代码片段。这是元素项的代码。

Text
{
    //externally set
    property int itemIndex
    property int selectedIndex
    property int numberOfElements
    property int span

    //internally set
    property int shortestDistance
    readonly property int distancePerItem: 100

    id: root

    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right

    anchors.verticalCenterOffset: shortestDistance * distancePerItem
    anchors.rightMargin: Math.abs(shortestDistance) > span ? -contentWidth * Math.abs(shortestDistance) : 0


    Behavior on anchors.rightMargin { NumberAnimation { duration: 500 } }

    Behavior on anchors.verticalCenterOffset { NumberAnimation { duration: 500 } }

    onSelectedIndexChanged: updatePosition()

    function updatePosition()
    {
        shortestDistance = itemIndex - selectedIndex;
        if (shortestDistance > numberOfElements/2)
        {
             shortestDistance -= numberOfElements;
        }
        else if (shortestDistance < -numberOfElements/2)
        {
            shortestDistance += numberOfElements;
        }
    }
 }