Discussion :

[Faridsarl]

Bonjour,

Est-il possible de concevoir un glisseur (slider) d'images (comme dans l'image ci-dessous) avec Qt Quick ? Si oui, quelles seraient les composants/éléments nécessaires pour faire cela ?



Je débute avec Qt Quick mais de bonnes connaissances en javascript, ma première idée est de faire le slider dans une page html avec javascript et de l'embarquer dans un QWebView mais je me dis qu'il doit avoir des possibilités avec Qt Quick.

Merci d'avance pour votre aide.

[mintho carmo]

Avec PathView. Cf http://doc.qt.io/qt-5/qml-qtquick-pathview.html

[Faridsarl]

Merci Mintho, cela semble répondre à ce que je veux.
Mais j'ai du mal à comprendre la logique. Avec l'exemple que tu as donné, quand j'essaie d'agrandir le conteneur de vignettes et leurs tailles, tout chamboule.
J'ai essayé d'appliquer plusieurs valeurs à X, Y, ControlX et ControlY de PathQuad mais ça n'a rien du tout. J'ai aussi lu la documentation sur les propriétés et disons que je m'en sors pas.

Code QML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Component {
            id: delegate
            Column {
                id: wrapper
                Image {
                    id: imageSource
                    anchors.horizontalCenter: nameText.horizontalCenter
                    width: 210
                    height: 350
                    source: icon
                }
                Text {
                    id: nameText
                    text: name
                    font.pointSize: 16
                    color: wrapper.PathView.isCurrentItem ? "red" : "black"
                }
                z: PathView.isCurrentItem ? 100 : 10
            }
        }
 
        PathView {
            clip: false
            visible: true
            rotation: 0
            scale: 1
            anchors.fill: parent
            model: ContactModel{}
            delegate: delegate
            width: parent.width
            path: Path {
                startX: slider.width/2
                startY: slider.height/2
                PathQuad { x: 120; y: 25; controlX: 120; controlY: 75 }
                PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
            }
            focus: true
            Keys.onLeftPressed: decrementCurrentIndex()
            Keys.onRightPressed: incrementCurrentIndex()
        }

Par ailleurs, je me demande si pour ce cas-ci (le slider dans le premier message), c'est PathQuad qu'il faut utiliser ?