reducing the distance between Qml pathview members - qt

Question

I have been trying to implement a scroll kind of thing using the Pathview element of QML.Below image shows the progress
I want the reduce the distance between the Calendar and the Messaging element. Please help.
Below is my code of the scroll.
import QtQuick 2.0
Rectangle {
// property real rotationOrigin: PathView.origin
id: scroll
width: 800; height: 480
color: "white"
// property real rotationAngle
ListModel {
id: appModel
ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
/*ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }*/
}
Component {
id: appDelegate
Item {
id: item
width: 240; height: 80
scale: PathView.iconScale
property real rotationAngle: PathView.angle
transform: Rotation {
id: rotation
origin.x: item.width/2
origin.y: item.height/2
axis.x: 1; axis.y:0 ; axis.z: 0
angle: rotationAngle
}
Image {
id: myIcon
y: 20; anchors.verticalCenter: parent.verticalCenter
source: icon
smooth: true
}
Text {
anchors {
leftMargin: 10
left: myIcon.right; verticalCenter: parent.verticalCenter }
text: name
font.pointSize: 25
smooth: true
}
MouseArea {
anchors.fill: parent
onClicked: {
view.currentIndex = index
console.log("onClicked" + index);
}
}
}
}
Component {
id: appHighlight
Rectangle { width: 240; height: 80; color: "lightsteelblue" }
}
PathView {
Keys.onRightPressed: if (!moving) { incrementCurrentIndex(); console.log(moving) }
Keys.onLeftPressed: if (!moving) decrementCurrentIndex()
id: view
anchors.fill: parent
highlight: appHighlight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
focus: true
model: appModel
delegate: appDelegate
path: Path {
startX: scroll.width/2
startY: 0
PathAttribute { name: "z"; value: 0 }
PathAttribute { name: "angle"; value: 75 }
PathAttribute { name: "iconScale"; value: 0.85 }
PathLine { x: scroll.width / 2; y: scroll.height / 4; }
PathAttribute { name: "z"; value: 50 }
PathAttribute { name: "angle"; value: 70 }
PathAttribute { name: "iconScale"; value: 0.85 }
PathLine { x: scroll.width /2; y: scroll.height/2; }
PathAttribute { name: "z"; value: 100 }
PathAttribute { name: "angle"; value: 0 }
PathAttribute { name: "iconScale"; value: 1.0 }
PathLine { x: scroll.width /2; y: 3*(scroll.height/4); }
PathAttribute { name: "z"; value: 50 }
PathAttribute { name: "angle"; value: -70 }
PathAttribute { name: "iconScale"; value: 0.85 }
PathLine { x: scroll.width /2; y: scroll.height; }
PathAttribute { name: "z"; value: 0 }
PathAttribute { name: "angle"; value: -75 }
PathAttribute { name: "iconScale"; value: 0.85 }
}
}
}

Answer 1

Did you try with PathPercent? Take a look here:
http://qmlbook.github.io/en/ch06/index.html#the-pathview