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が見える何支配するcontentXとcontentYを使用していますFlickable継承：

は、ここに私のコードです。モデルRectanglesは実際には移動しません。

BehaviorをListViewのcontentXに送信してみます。 positionViewAtIndexのドキュメントでは、それらの数学が予測できないため直接操作しないと言われていますが、それらの動作はうまくいく可能性があります。

Answer 2

私は最終的にこれを使用して、いくつかの結果を持っていた：ブトンアバントで

//：

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は次のようになります。

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コントロールになりboutonAvant with：

 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つの異なる注文に続いて、同時に2つの場所で動こうとしていたかのように、私は邪魔な "フリック"を得る。しかし、私はこれがどこから来るのかわかりません...