游戏菜单中的列表项包装答案

【问题标题】：List Item Wrapping in Game Menu游戏菜单中的列表项包装
【发布时间】：2017-08-27 12:28:10
【问题描述】：

我试图通过将自身包裹在自身周围来获得带有游戏项目列表的无限滚动效果，因此如果您继续按下它会平滑地环绕到第一个项目。

我想要获得的效果就像这里的这张图片，其中列出的菜单项没有中断。

我目前正在 Qt Quick QML 中执行此操作，但我认为它可能与代码无关。我也试图不通过移动列表中的项目索引来移动，只是移动对象的 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 } }
}

任何帮助将不胜感激

【问题讨论】：

查看PathView;它应该做你想做的。

标签： list qt user-interface menu qml

【解决方案1】：

所以我的朋友给我发了一个代码 sn-p，说明如何进行我需要的包装。这是元素项的代码。

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;
        }
    }
 }

【讨论】：