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实际上并没有移动。

我会在Behavior＆＃39; ListView上尝试contentX。请注意，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;
           }
        }

当物品被滑动时，它会被罚款。在列表视图的中间但是当我到达第一个项目（在最后一次点击左箭头上）或最后一个项目时（在最后一次点击右箭头上），我得到一个令人不安的＆＃39;轻拂＆＃39;好像listview试图同时在两个地方移动，遵循两个不同的顺序。但我不知道这可能来自哪里......

如何在ListView中滑动项目

2 个答案: