Animate`positionViewAtIndex`

Question

나는 임의의 위치에 항목을 추가 할 수있는 모델을 보여주는 ListView을 가지고 있습니다.

는 지금은

positionViewAtIndex(newIndex, ListView.Visible) 

으로, 나의 새로운 항목을보고, 그것에 ListView를 이동하려고 시도하지만이 변화는 매우 어려운 feeles을 somtimes. som 애니메이션으로 부드럽게 할 수 있습니까?

다소 긴 예제와 함께 재생 : contentX에 대한뿐만 아니라 애니메이션 요소를 추가하여 당신이 그것을 할 수

import QtQuick 2.7 
import QtQuick.Controls 2.0 

ApplicationWindow 
{ 
    width: 1024 
    height: 800 
    visible: true 
    property int lastAddedIndex: -1 
    onLastAddedIndexChanged: lv.positionViewAtIndex(lastAddedIndex, ListView.Contain) 

    Button { 
     property int num: 10 
     text: 'Add element: ' + num 
     onClicked: { 
      lastAddedIndex = Math.floor(Math.random(num) * lm.count) 
      lm.insert(lastAddedIndex, { num : this.num }) 
      num++ 
     } 
    } 

    ListModel { 
     id: lm 
     ListElement { num: 0 } 
     ListElement { num: 1 } 
     ListElement { num: 2 } 
     ListElement { num: 3 } 
     ListElement { num: 4 } 
     ListElement { num: 5 } 
     ListElement { num: 6 } 
     ListElement { num: 7 } 
     ListElement { num: 8 } 
     ListElement { num: 9 } 
    } 

    ListView { 
     id: lv 
     model: lm 
     y: 150 
     width: 800 
     height: 100 
     spacing: 2 
     clip: true 
     orientation: ListView.Horizontal 
     delegate: Rectangle { 
      width: 150 
      height: 100 
      border.color: 'black' 
      color: lastAddedIndex === index ? 'purple' : 'white' 
      Text { 
       anchors.centerIn: parent 
       text: index + ': ' + num 
      } 
     } 
     add: Transition { NumberAnimation { property: 'width'; from: 0; to: 150; duration: 600 } } 
    } 
} 

Answer 1

(당신은 당신의 요소를 수평으로 배치를 가지고), 볼의 위치를 ​​변경 애니메이션하기 위해 그것을 실행

source

import QtQuick 2.7 
import QtQuick.Controls 2.0 

ApplicationWindow 
{ 
    width: 1024 
    height: 800 
    visible: true 
    property int lastAddedIndex: -1 
    onLastAddedIndexChanged: gotoIndex(lastAddedIndex) 

    function gotoIndex(idx) { 
     anim.running = false; 

     var pos = lv.contentX; 
     var destPos; 

     lv.positionViewAtIndex(idx, ListView.Contain); 
     destPos = lv.contentX; 

     anim.from = pos; 
     anim.to = destPos; 
     anim.running = true; 
    } 

    NumberAnimation { id: anim; target: lv; property: "contentX"; duration: 500 } 

    Button { 
     property int num: 10 
     text: 'Add element: ' + num 
     onClicked: { 
      lastAddedIndex = Math.floor(Math.random(num) * lm.count) 
      lm.insert(lastAddedIndex, { num : this.num }) 
      num++ 
     } 
    } 

    ListModel { 
     id: lm 
     ListElement { num: 0 } 
     ListElement { num: 1 } 
     ListElement { num: 2 } 
     ListElement { num: 3 } 
     ListElement { num: 4 } 
     ListElement { num: 5 } 
     ListElement { num: 6 } 
     ListElement { num: 7 } 
     ListElement { num: 8 } 
     ListElement { num: 9 } 
    } 

    ListView { 
     id: lv 
     model: lm 
     y: 150 
     width: 800 
     height: 100 
     spacing: 2 
     clip: true 
     orientation: ListView.Horizontal 
     delegate: Rectangle { 
      width: 150 
      height: 100 
      border.color: 'black' 
      color: lastAddedIndex === index ? 'purple' : 'white' 
      Text { 
       anchors.centerIn: parent 
       text: index + ': ' + num 
      } 
     } 

     add: Transition { NumberAnimation { property: 'width'; from: 0; to: 150; duration: 600 } } 
    } 
}