QML Pathview how to slide through icons - path

Question

I have the following requirement and can't find the right way in.
A maximum of 5 icons from a list of icons should be displayed.
At the start, the first icon from the list should be in the middle of the container.
With left arrow button click, the next icon is placed in the middle and the first moves to the left.
At the end of the list, the last icon remains in the middle. The icons to the right and left of the center should be smaller than the icon in the center.
Start:
Middle:
End:
The pathview works so far, the icons come from a c++ class and are displayed via the delegate.
I have the path block from an example, but it won't fit directly to this and I don't understand yet what exactly is defined here.
Do I need maybe 5 PathAttribute blocks and 4 PathLine? How do i start with the first icon in the middle? How can I change the size of the icons depending on their position and how can I get them closer together
I would be very happy about any help to get started
Coverflow.qml
Rectangle {
id: root
height: 200
width: 400
Layout.preferredHeight: height
Layout.preferredWidth: width
color: "white"
PathView {
id: view
anchors.fill: parent
pathItemCount: 5
model: m_screen.coverflowModel
delegate: CoverflowDelegate { height: view.height; width: view.height; p_icon: icon; p_z: PathView.iconOrder }
path: Path {
startX: 0; startY: view.height/2
PathAttribute { name: "iconScale"; value: 0.6 }
PathAttribute { name: "iconOpacity"; value: 0.9 }
PathAttribute { name: "angle"; value: 90}
PathLine {x: view.width / 2; y: view.height/2 }
PathAttribute { name: "iconScale"; value: 1 }
PathAttribute { name: "iconOpacity"; value: 1 }
PathAttribute { name: "angle"; value: 0 }
PathLine {x: view.width; y: view.height/2 }
PathAttribute { name: "itemScale"; value: 0.6 }
PathAttribute { name: "itemOpacity"; value: 0.9 }
PathAttribute { name: "angle"; value: -90 }
}
}
}
CoverflowDelegate.qml
Item {
id: delegate
property string p_icon
property string p_source: (!p_icon || p_icon.length === 0) ? "" : "image://iconprovider/" + p_icon
property int p_z
Rectangle {
color: "lightgrey"
width: 70; height: 70
radius: 10
z: p_z
Image {
anchors.centerIn: parent
source: p_source
sourceSize.width: parent.width * 0.8
}
}
}

Answer 1

You could mock this up with a ListView + Button. We can configure the ListView with:
height: 120
width: 600 // i.e. height * 5
orientation: ListView.Horizontal
currentIndex: Math.round(2 + (contentX / 120))
snapMode: ListView.SnapToItem
The ListView will take care of the horizontal scrolling and snapping to item to create a clean animation and user experience.
Add 4 dummy records to the ListModel so that we can hide the left 2 and right 2 delegates.
import QtQuick
import QtQuick.Controls
Page {
ListView {
anchors.centerIn: parent
width: height * 5
height: 120
clip: true
model: MyListModel { id: listModel }
currentIndex: Math.min(listModel.count - 1 , Math.round(2 + (contentX / height)))
orientation: ListView.Horizontal
snapMode: ListView.SnapToItem
delegate: MyDelegate { }
}
}
// MyDelegate.qml
import QtQuick
import QtQuick.Controls
Item {
property ListView listView: ListView.view
property bool isCurrentItem: ListView.isCurrentItem
property int dist: Math.abs(listView.width / 2 + listView.contentX - (x + width / 2))
width: height
height: listView.height
Button {
anchors.centerIn: parent
visible: !dummy
width: parent.height / (1 + dist * 0.002)
height: width
background: Rectangle {
radius: 10
border.color: "#888"
color: isCurrentItem ? "#ccc" : "#eee"
}
icon.source: ico
icon.width: parent.width * .6
icon.height: parent.height * .6
icon.color: isCurrentItem ? "black" : "#888"
Label {
anchors.horizontalCenter: parent.horizontalCenter
y: parent.height * 3 / 4
text: nam
visible: !dummy
color: "#08f"
z: 2
}
}
}
// MyListModel.qml
import QtQuick
import QtQuick.Controls
ListModel {
Component.onCompleted: {
append( { nam: "", ico: "", val: -1, dummy: true } );
append( { nam: "", ico: "", val: -1, dummy: true } );
append( { nam: "One", ico: "target.svg", val: 1 } );
append( { nam: "Two", ico: "pencil.svg", val: 2 } );
append( { nam: "Three", ico: "monitor.svg", val: 3 } );
append( { nam: "Four", ico: "target.svg", val: 4 } );
append( { nam: "Five", ico: "pencil.svg", val: 5 } );
append( { nam: "Six", ico: "monitor.svg", val: 6 } );
append( { nam: "Seven", ico: "target.svg", val: 7 } );
append( { nam: "Eight", ico: "pencil.svg", val: 8 } );
append( { nam: "", ico: "", val: -1, dummy: true } );
append( { nam: "", ico: "", val: -1, dummy: true } );
}
}
// target.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="8" stroke="black" stroke-width="1" fill="none" />
<path stroke="black" stroke-width="0.5" fill="black" d="M 16 12 L 15 11 L 15 6 L 17 6 L 17 11 z" />
<path stroke="black" stroke-width="0.5" fill="black" d="M 20 16 L 21 15 L 26 15 L 26 17 L 21 17 z"/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 16 20 L 17 21 L 17 26 L 15 26 L 15 21 z "/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 12 16 L 11 17 L 6 17 L 6 15 L 11 15 z"/>
</svg>
// monitor.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect stroke="black" fill="none" x="5" y="7" width="22" height="14" rx="1"/>
<path stroke="black" stroke-width="0.1" fill="black" d="M 2 23 L 30 23 L 30 24 L 29 25 L 3 25 L 2 24 z L 14 23.5 L 14 24.5 L 18 24.5 L 18 23.5 L 14 23.5"/>
<path stroke="black" stroke-width="0.1" fill="black" d="M 22 13 L 23 13 L 23 15 L 10 15 L 10 15.8 L 8 14.5 L 10 13.2 L 10 14 L 22 14 z
"/>
</svg>
// pencil.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path stroke="black" stroke-width="1" fill="transparent" d="M 24 18 L 24 25
A 1 1 0 0 1 23 26 L 5 26 A 1 1 0 0 1 4 25 L 4 7 A 1 1 0 0 1 5 6 L 23 6 A 1 1 0 0 1 24 7 L 24 10"/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 27 13 L 25 11 L 26 10 A 1 1 0 0 1 27 10 L 28 11 A 1 1 0 0 1 28 12 z
"/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 26 14 L 21 19 L 19 17 L 24 12 z"/>
<path stroke="black" stroke-width="0.5" fill="transparent" d="M 21 19 L 20 20 L 18 20 L 18 18 L 19 17" />
<rect x="18" y="19" width="1" height="1" fill="black"/>
</svg>
You can Try it Online!