Question

当QML到达模型中的最后一个元素时（如列表视图和网格视图默认行为），如何在QML中停止移动它.ie，我不想循环移动。

在下面的代码中，如果我们在第一个（“第一个”）项目最后（“last”）之后向右滑动（然后是“Jane Doe”）。可以做什么来在第一次停止进一步向右滑动到达并在到达最后一个项目时进一步向左滑动。当到达第一个或最后一个时应该停止

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id:contactModel
         ListElement {
             name: "first"
             icon: "pic.png"
         }
         ListElement {
             name: "Jane Doe"
             icon: "pic.png"
         }
         ListElement {
             name: "John Smith"
             icon: "pic.png"
         }

         ListElement {
             name: "Bill Jones"
             icon: "pic.png"
         }
         ListElement {
             name: "Jane Doe"
             icon: "pic.png"
         }
         ListElement {
             name: "John Smith"
             icon: "pic.png"
         }
         ListElement {
             name: "Bill Jones"
             icon: "pic.png"
         }
         ListElement {
             name: "Jane Doe"
             icon: "pic.png"
         }
         ListElement {
             name: "last"
             icon: "pic.png"
         }
     }

         Component {
             id: delegate
             Column {
                 id: wrapper
                 Image {
                     anchors.horizontalCenter: nameText.horizontalCenter
                     width: 64; height: 64
                     source: icon
                 }
                 Text {
                     id: nameText
                     text: name
                     font.pointSize: 5
                     color: wrapper.PathView.isCurrentItem ? "red" : "black"
                 }
             }
         }

         PathView {
             anchors.fill: parent
             model: contactModel
             delegate: delegate
             snapMode:PathView.SnapOneItem
             path: Path {
                 startX: 0; startY: 100


                 PathLine { x: 640; y: 400;  }
             }
         }

}

Answer 1

这是实现的样子（我无法找到可用的属性）

PathView {
    property int previousCurrentIndex: 0
    currentIndex: 0
    ...

    onCurrentIndexChanged: {
        var lastIndex = contactModel.count - 1
        if (currentIndex == 0 && previousCurrentIndex == lastIndex) {
            pathViewId.positionViewAtIndex(lastIndex, PathView.Beginning)
        } else if (currentIndex == lastIndex && previousCurrentIndex == 0) {
            pathViewId.positionViewAtIndex(0, PathView.Beginning)
        }
        previousCurrentIndex = currentIndex
    }
}

引入自定义属性previousCurrentIndex，并在发出currentIndex信号

时计算实际onCurrentIndexChanged

Answer 2

您可以在PathView中添加以下代码。它将停止视图从结尾到起点的移动，反之亦然。

property real previousOffsetVal: 0.

onOffsetChanged: {
            /* 10 is a threshhold, should be smaller than the total elements count*/
            if (Math.abs( previousOffsetVal - offset) > 10 ) {
                offset = previousOffsetVal
            }

            previousOffsetVal = offset
}

在最后一个元素处停止Pathview移动

2 个答案: