Simple PathView with centered Current Item - qt

Question

I've just started programming in QML and I need to make a simple Carousel with some images. I've found that the simplest way to do that is to use a PathView. According to that I've tried to make my current item on the center of the view,failing. Here's the code I've done.
Rectangle {
id: rectangle
height: 200
color: "#00000000"
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.fillWidth: true
PathView {
id: carouselView
anchors.fill: parent
model: listModel
delegate: Image {
width: PathView.isCurrentItem ? 256 : 128
height: PathView.isCurrentItem ? 256 : 128
source: iconSource
}
path: Path {
startX: 0
PathLine {
x: 800
y: 0
}
}
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
}
}
ListModel {
id: listModel
ListElement {
iconSource: "qrc:///images/chair.svg"
}
ListElement {
iconSource: "qrc:///images/chair.svg"
}
ListElement {
iconSource: "qrc:///images/chair.svg"
}
ListElement {
iconSource: "qrc:///images/chair.svg"
}
}
The desired effect is a simple horizontal carousel with a centered current item.
Current version used : 5.6

Answer 1

Here is a simple carousel example using PathView:
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 640
Component {
id: delegate
Item {
width: 200; height: 200
scale: PathView.iconScale
opacity: PathView.iconOpacity
z: PathView.iconOrder
Image { anchors.fill: parent; source: modelData }
}
}
PathView {
id: view
anchors.fill: parent
anchors.bottomMargin: 150
anchors.topMargin: 50
pathItemCount: 7
preferredHighlightBegin: 0.5 //
preferredHighlightEnd: 0.5 // That should center the current item
highlightRangeMode: PathView.StrictlyEnforceRange //
model:
[
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
]
delegate: delegate
path: Path {
startX: 0; startY: view.height/2
PathAttribute { name: "iconScale"; value: 0.2 }
PathAttribute { name: "iconOpacity"; value: 10.2 }
PathAttribute { name: "iconOrder"; value: 0 }
PathLine {x: view.width / 2; y: view.height/2 }
PathAttribute { name: "iconScale"; value: 1.2 }
PathAttribute { name: "iconOpacity"; value: 1 }
PathAttribute { name: "iconOrder"; value: 8 }
PathLine {x: view.width; y: view.height/2 }
}
}
}
Sure, if you really want to place current item in the center of the view you just have to change the path, i.e. move start point to the center etc.