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

나는 마지막으로이를 사용하여 일부 결과를 가지고 :

//에서 부통 전위 :

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

'슬라이드'된 항목이 목록보기의 중간에 있지만 첫 번째 항목 (왼쪽 화살표의 마지막 클릭) 또는 마지막 항목 (마지막 클릭)에 도달하면 벌금이 부과됩니다 오른쪽 화살표에), 나는 listview가 2 개의 다른 순서를 따라, 동시에 2 개의 장소에서 움직이고 자하는 것처럼 불안한 '가볍게 치기'를 얻는다. 그러나 이것이 어디에서 왔는지 알 수는 없습니다 ...