如何在 ListView 中滑动项目

Question

我想创建一个幻灯片，显示 3 个项目，每个项目都有一张图片和一个标签，中间的项目被突出显示（图片更大，标签下方显示描述文本）。

当点击相应的箭头时，我希望项目“滑动”而不是只出现在它们应该出现的位置。不幸的是，委托中的 Behavior on x { NumberAnimation{...}} 代码没有这样做。

这是我的代码：

import QtQuick 2.7
import QtQuick.Window 2.0

Window {
    id: display
    width: 500
    height: 300
    visible: true

    Item {
        id: conteneur
        anchors.leftMargin: 50
        height: display.height / 1.2
        width: display.width / 1.2
        anchors.horizontalCenter: parent.horizontalCenter

        Rectangle {
            id: boutonAvant
            height: conteneur.height
            anchors.verticalCenter: parent.verticalCenter
            width: 68
            x: -50
            color: "transparent"
            z: 1

            Text {
                id: pictureAv
                anchors.centerIn: parent
                text: "<"
                font.pixelSize: 90
            }

            MouseArea {
                id: buttonAvMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onClicked: listview.decrementCurrentIndex()
            }
        }

        ListView {
            id: listview
            clip: true
            orientation: ListView.Horizontal
            width: conteneur.width
            height: conteneur.height / 1.2
            anchors.centerIn: conteneur
            model: myListModel
            delegate: myDelegate

            maximumFlickVelocity: 700
            snapMode: ListView.SnapToItem

            highlightFollowsCurrentItem: true
            highlightRangeMode: ListView.StrictlyEnforceRange
            preferredHighlightBegin: conteneur.width * 0.3
            preferredHighlightEnd: conteneur.width * 0.3 + conteneur.width * 0.4

            onCurrentIndexChanged: {
                positionViewAtIndex(currentIndex, ListView.SnapPosition)
            }

            Component.onCompleted: {
                currentIndex = 1
            }
        }

        Rectangle {
            id: boutonApres
            height: conteneur.height
            anchors.verticalCenter: parent.verticalCenter
            x: conteneur.width - 10
            width: 68
            color: "transparent"

            Text {
                id: pictureAp
                anchors.centerIn: parent
                text: ">"
                font.pixelSize: 90
            }

            MouseArea {
                id: buttonApMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onClicked: listview.incrementCurrentIndex()
            }
        }
    }

    ListModel {
        id: myListModel

        ListElement {
            name: "rectangle 0"
            desc: "blabla"
            mycolor: "green"
        }

        ListElement {
            name: "rectangle 1"
            desc: "blabla"
            mycolor: "blue"
        }
        ListElement {
            name: "rectangle 2"
            desc: "blabla"
            mycolor: "lightblue"
        }
        ListElement {
            name: "rectangle 3"
            desc: "blabla, \n with several lines for test \n and more lines \n and more lines"
            mycolor: "gold"
        }
    }

    Component {
        id: myDelegate

        Rectangle {
            id: cadre
            opacity: listview.currentIndex === index ? 1 : 0.5
            anchors.top: parent.top
            anchors.topMargin: listview.currentIndex === index ? 0 : 35
            width: listview.currentIndex === index ? listview.width * 0.4 : listview.width * 0.3
            height: conteneur.height
            border.color: mycolor
            color: "transparent"

            Behavior on x {
                NumberAnimation {
                    duration: 800
                }
            }
        }
    }
}

Answer 1

ListView 继承 Flickable 使用 contentX 和 contentY 来管理可见的内容。模型Rectangles 实际上并没有移动。

我会在ListView 的contentX 上尝试Behavior。请注意，positionViewAtIndex 的文档说不要直接操作它们，因为它们的数学是不可预测的——但它们的行为可能会起作用。

Answer 2

我终于用这个得到了一些结果：

//在 bouton Avant 中：

MouseArea{
  id: boutonAvant
  anchors.fill: parent
  hoverEnabled: true

  onClicked: {
  pictureAp.visible = true;
  var oldPos = listview.contentX;
  listview.decrementCurrentIndex();
  var newPos = oldPos - listview.width*0.3; // listview.width*0.3 is the width of one item that is not the current one

  if(listview.currentIndex == 0){
    pictureAv.visible = false;
  }

  anim.running = false
  anim.from = oldPos;
  anim.to = newPos;
  anim.running = true;
  }
 }

}

ListView 变成：

 ListView{
            id: listview
            clip: true
            orientation: ListView.Horizontal
            width: conteneur.width
            height: conteneur.height/1.2
            anchors.centerIn: conteneur
            model: myListModel
            delegate: myDelegate

            Component.onCompleted: {
                currentIndex = 1;
            }

         }

  NumberAnimation { id: anim; target: listview; property: "contentX"; duration: 800 }

boutonApres 与 boutonAvant 类似：

        MouseArea{
            id: buttonApMouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                pictureAv.visible = true;

                var oldPos = listview.contentX;
                listview.incrementCurrentIndex();
                var newPos = oldPos + listview.width*0.3;

                if(listview.currentIndex == listview.count-1){
                    pictureAp.visible = false;
                }

                anim.running = false
                anim.from = oldPos;
                anim.to = newPos;
                anim.running = true;
           }
        }

当被“滑动”的项目位于列表视图的中间但当我到达第一个项目（最后一次单击左箭头）或最后一个项目（最后一次单击右箭头），我得到一个令人不安的“轻弹”，好像列表视图试图同时在两个地方移动，遵循 2 个不同的命令。但我看不出这是从哪里来的……