アニメート `positionViewAtIndex`

Question

私はListViewモデルを示しています。ランダムな位置にエントリを追加するかもしれません。

今、私は私の新しいエントリを見てみたい、と

positionViewAtIndex(newIndex, ListView.Visible) 

と、それにListViewを移動しよう。しかし、この変更は非常に難しいfeelesをsomtimes。 somアニメーションで滑らかな姿勢がありますか？

Aやや長い例では、一緒にプレイする：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 } } 
    } 
}