Revision control
Copy as Markdown
// Copyright (C) 2018 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
import QtQuick
import QtQml.Models
import shared as Shared
pragma ComponentBehavior: Bound
Rectangle {
id: root
property Item displayItem: null
width: 300
height: 400
color: "black"
Shared.FlickrRssModel {
id: flickrModel
tags: "fjords,mountains"
}
DelegateModel {
id: visualModel
model: flickrModel
delegate: Item {
id: delegateItem
width: 76
height: 76
required property string thumbnail
Rectangle {
id: image
x: 0
y: 0
width: 76
height: 76
border.width: 1
border.color: "white"
color: "black"
Image {
anchors.fill: parent
anchors.leftMargin: 1
anchors.topMargin: 1
source: delegateItem.thumbnail
fillMode: Image.PreserveAspectFit
}
MouseArea {
id: clickArea
anchors.fill: parent
onClicked: root.displayItem = root.displayItem !== delegateItem ? delegateItem : null
}
states: [
State {
when: root.displayItem === delegateItem
name: "inDisplay";
ParentChange {
target: image
parent: imageContainer
x: 75
y: 75
width: 150
height: 150
}
PropertyChanges {
image.z: 2
delegateItem.DelegateModel.inItems: false
}
},
State {
when: root.displayItem !== delegateItem
name: "inList";
ParentChange {
target: image
parent: delegateItem
x: 2
y: 2
width: 75
height: 75
}
PropertyChanges {
image.z: 1
delegateItem.DelegateModel.inItems: true
}
}
]
transitions: [
Transition {
from: "inList"
SequentialAnimation {
PropertyAction {
target: delegateItem
property: "DelegateModel.inPersistedItems"
value: true
}
ParentAnimation {
target: image;
via: root
NumberAnimation {
target: image
properties: "x,y,width,height"
duration: 1000
}
}
}
}, Transition {
from: "inDisplay"
SequentialAnimation {
ParentAnimation {
target: image
NumberAnimation {
target: image
properties: "x,y,width,height"
duration: 1000
}
}
PropertyAction {
target: delegateItem
property: "DelegateModel.inPersistedItems"
value: false
}
}
}
]
}
}
}
PathView {
id: imagePath
anchors { left: parent.left; top: imageContainer.bottom; right: parent.right; bottom: parent.bottom }
model: visualModel
pathItemCount: 7
path: Path {
startX: -50; startY: 0
PathQuad { x: 150; y: 50; controlX: 0; controlY: 50 }
PathQuad { x: 350; y: 0; controlX: 300; controlY: 50 }
}
}
Item {
id: imageContainer
anchors { fill: parent; bottomMargin: 100 }
}
}