a played a while with the ListView options but can't get the animations right
so i've tried to implement my own list view like item - as an example how the animation would feel
working sample, with an fake c++ model, with the animations i want to see
import QtQuick 2.5
import QtQuick.Controls 2.5
import QtQuick.Window 2.5
Window {
width: 500
height: 700
visible: true
// my model ctrl is in C++
// faked it here with pure QML to simplify the example
ListModel {
id: cppModel
// different size - item type depdendend (just const here)
ListElement { name: "Item 1"; active: false; height: 100 }
ListElement { name: "Item 2"; active: false; height: 150 }
ListElement { name: "Item 3"; active: false; height: 200 }
ListElement { name: "Item 4"; active: false; height: 250 }
ListElement { name: "Item 5"; active: false; height: 300 }
ListElement { name: "Item 6"; active: false; height: 350 }
property int currentItemIndex: -1
function activate_item(index) {
// auto deactivate all others
for(var i = 0; i < rowCount(); i++) {
var active = (index === i)
get(i).active = active
if(active) {
currentItemIndex = i
}
}
}
function remove_item(index) {
if(currentItemIndex === -1) {
console.log("can remove not active item")
return
}
remove(currentItemIndex);
}
function deactivate_current_item()
{
if(currentItemIndex === -1) {
console.log("can remove not active item")
return
}
get(currentItemIndex).active = false
}
}
Column {
Rectangle {
width: 320
height: 480
border { width: 2; color: "steelblue" }
Flickable {
id: flickable
clip: true
anchors.fill: parent
contentWidth: 320
contentHeight: 600
function goto_header()
{
contentY = 0
}
Behavior on contentY {
NumberAnimation {
easing.type: Easing.OutCubic
duration: 500
}
}
Rectangle {
id: myList
anchors.top: parent.top
anchors.left: parent.left
width: flickable.contentWidth
height: flickable.contentHeight
Column {
Rectangle {
id: header
width: 320
height: 40
color: "red"
border { width: 2; color: "black" }
Text { text: "Header"}
}
Repeater {
model: cppModel
Rectangle {
readonly property int reducedSize: 30
width: 320
height: model.active ? model.height : reducedSize
border { width: 2; color: "black" }
Text {
text: model.name
}
MouseArea {
anchors.fill: parent
onClicked: {
// find new list contentY
// works also if item above is shrinking
// but only if shrinked height is for all items the same
var newContentY = (model.index * reducedSize) + header.height
cppModel.activate_item(model.index)
// scroll to this element
flickable.contentY = newContentY
}
}
Behavior on height {
NumberAnimation {
easing.type: Easing.OutCubic
duration: 500
}
}
}
}
}
}
}
}
Rectangle {
height: 100
width: 320
Row
{
Button {
text: "Delete"
onClicked: {
console.log("Delete clicked")
cppModel.remove_item();
flickable.goto_header();
}
}
Button {
text: "Save"
onClicked: {
console.log("Save clicked")
cppModel.deactivate_current_item()
}
}
}
}
}
}
Screenshot of the sample program
0_1563517642889_Screenshot from 2019-07-19 08-27-03.png