Cependant, cette manière d'afficher et de faire défiler des images ne fait pas très
moderne. PathView permet bien plus de fantaisies à ce niveau, en alignant les éléments
sur une courbe, avec les effets de déplacement qui correspondent.
Rectangle {
width: window.width
Layout.fillHeight: true
Layout.minimumHeight: 600
Layout.maximumHeight: 600
PathView {
id: booksList
anchors.fill: parent
focus: true
Keys.onLeftPressed: decrementCurrentIndex()
Keys.onRightPressed: incrementCurrentIndex() model: bookModel delegate: Item {
… } path: Path { startX: 10; startY: 10 PathQuad { x: 10; y: booksList.height - 10
controlX: booksList.width controlY: booksList.height / 2 } } }
La propriété la plus importante d'un PathView est, sans conteste, le chemin que les
éléments devront suivre. Il commence par un point de départ et se poursuit par un ou
plusieurs points de passage ou de contrôle (la courbe passe impérativement par les
premiers et est déformée par les seconds). Ici, PathQuad indique que le lien avec le
point précédent suivra une courbe de Bézier, dont le point final est donné dans les
propriétés x et y, avec un point de contrôle. Ainsi, ce chemin ira de (startX,
startY) à (x, y), en suivant une courbe de Bézier dont le point de contrôle est
(controlX, controlY) (voir Figure 16.5).
Figure 16.5 : Courbe suivie par les éléments de PathView par rapport aux trois points donnés : un début,
une fin, puis un point de contrôle
344