Discussion :

[Erakis]

Bonjour à tous,

J'ai conçu une liste qui est présentement flickable, toutefois on me demande de changer son comportement afin qu'elle possède un bouton Page Up et un Bouton Page Down à même ses items.

Comme une image vaut mille mots :



Donc, j'explique :

1. La liste est à sa première page et dans cette page il y a plus d'élément qu'elle ne peut en afficher, donc il faut qu'elle possède un item (Page Down), mais pas de bouton (Page Up) puisque nous sommes déjà sur la première page.
2. La liste est à sa deuxième page et dans cette page il y a plus d'élément qu'elle ne peut en afficher, donc il faut qu'elle possède un item (Page Down) et un bouton (Page Up) qui permet de revenir à la page précédante.
3. La liste est à sa dernière page et il y a moins d'élément qu'elle peut en afficher, donc pas besoin d'un bouton (Page Down), mais le bouton (Page Up) doit être visible pour revenir à la page précédante.

Présentement, je regarde ma listview, son modèle et son delegate pour chaque item et j'ai aucune idée de comment faire. La mince idée que j'ai eu juste qu'ici serait d'intercepter l'événement qui indique que la liste à terminer de se charger, et remplacer le premier élément ou le dernier en fonction des items par page. Mais sérieusement, j'ai échoué jusqu'ici.

Merci

[loupium]

Bonjour,

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import QtQuick 2.4
 
Item {
    width: 150; height: 150
    ListModel {
        id: myModel
        ListElement {
            text: "Item 1"
        }
        ListElement {
            text: "Item 2"
        }
        ListElement {
            text: "Item 3"
        }
        ListElement {
            text: "Item 4"
        }
        ListElement {
            text: "Item 5"
        }
        ListElement {
            text: "Item 6"
        }
        ListElement {
            text: "Item 7"
        }
        ListElement {
            text: "Item 8"
        }
    }
    Rectangle {
        id: header
        height: (my_listview.contentY > 0) ? 25 : 0
        width: parent.width
        color: "red"
        border.color: "green"
    }
    Rectangle {
        id: footer
        height: my_listview.atYEnd ? 0 : 25
        width: parent.width
        anchors.bottom: parent.bottom
        color: "red"
        border.color: "green"
    }
 
    ListView {
        id: my_listview
        width: 200;
        anchors.top: header.bottom
        anchors.bottom: footer.top
        clip: true
        snapMode: ListView.SnapToItem
        boundsBehavior: Flickable.StopAtBounds
 
        model: myModel
        delegate: Rectangle {
            height: 25
            width: 200
            color: "gray"
            border.color: "green"
            Text {
                text: modelData
            }
        }
    }
}

[loupium]

ou

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import QtQuick 2.4
 
Item {
    width: 150; height: 150
    ListModel {
        id: myModel
        ListElement {
            text: "Item 1"
        }
        ListElement {
            text: "Item 2"
        }
        ListElement {
            text: "Item 3"
        }
        ListElement {
            text: "Item 4"
        }
        ListElement {
            text: "Item 5"
        }
        ListElement {
            text: "Item 6"
        }
        ListElement {
            text: "Item 7"
        }
        ListElement {
            text: "Item 8"
        }
    }
 
 
    ListView {
        id: my_listview
        width: 200;
//        anchors.top: header.bottom
//        anchors.bottom: footer.top
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        clip: true
        snapMode: ListView.SnapToItem
        boundsBehavior: Flickable.StopAtBounds
 
        model: myModel
        delegate: Rectangle {
            height: 25
            width: 200
            color: "gray"
            border.color: "green"
            Text {
                text: modelData
            }
        }
    }
    Rectangle {
        id: header
        height: (my_listview.contentY > 0) ? 25 : 0
        width: parent.width
        color: "red"
        border.color: "green"
    }
    Rectangle {
        id: footer
        height: my_listview.atYEnd ? 0 : 25
        width: parent.width
        anchors.bottom: parent.bottom
        color: "red"
        border.color: "green"
    }
}

[Erakis]

Merci pour votre aide loupium

Toutefois, ce n'est pas exactement cela, j'ai peut-être mal exprimé ce dont j'avais besoin, je m'en excuse.

La liste ne doit pas être flickable, on doit seulement pouvoir changer les pages (up/down) avec les boutons en question.

Donc, pour reprendre mon exemple (en image mon premier post), dans l'image 1, si l'utilisateur clique sur le bouton (Page Down) alors on passe à l'image 2, si l'utilisateur clique sur le bouton (Page Up) alors on revient à l'image 1. Même chose, si dans l'image 2 on clique sur le bouton (Page Down) on passe à l'image 3. Bref c'est boutons servent à piloter la Listview en terme de vue par page.

Je dois quand même avouer que la recette est là, ça m'aide. Maintenant il me reste à savoir comment désactiver le mode flickable de la listview et changer de page sur le onclick des boutons up/down.

[Amnell]

Bonsoir,

En théorie, vous devriez parvenir à cela par le biais de la propriété interactive de votre Flickable, valeur false, qui empêchera les interactions utilisateur sur l'élément.
De là, si vous voulez faire du scroll item par item, vous pouvez reprendre le code donné par loupium, avec lors du clic sur le bouton "Page Down" un flickable.contentY += /* taille d'un item */ et inversement.
Pour du page par page, ce serait plutôt flickable.contentY += flickable.height. Pour faire joli, sauf erreur de ma part, vous devriez même pouvoir mettre une animation sur contentY pour rendre les transitions plus jolies.

Bonne soirée,
Louis

[Erakis]

Merci pour votre aide, c'est gentil.

Voilà comment j'ai implémenté le page up/down dans le ListView :

Code :

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
        var newPosY = 0
        switch (buttonName) {
            case "LeftMenuPageUp" :
                newPosY = (myListView.contentY - myListView.height)
                if (newPosY < myListView.originY) {
                    newPosY = myListView.originY
                }
                myListView.contentY = newIndex
            break;
 
            case "LeftMenuPageDown" :
                newPosY = (myListView.contentY + myListView.height)
                if (newPosY + myListView.height > myListView.contentHeight - myListView.originY) {
                    newPosY = myListView.contentHeight - myListView.height
                }
                myListView.contentY = newIndex
            break;
        }

Ça fonctionne très bien jusqu'ici

Cependant, j'aimerais que le changement se réalise en douceur. Alors j'ai essayé d'ajouter un animation sur la propriété contentY, mais ça ne fonctionne pas bien. On dirait qu'il se bataille entre deux actions en même temps. Bref, l'animation flick !

Code :

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

1
2
3
4
ListView {
       id: myListView
}
NumberAnimation { id: anim; target: myListView; property: "contentY"; duration: 2000 }

Et j'ai modifié mon code pour ceci :

Code :

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
        var newPosY = 0
        switch (buttonName) {
            case "LeftMenuPageUp" :
                newPosY = (myListView.contentY - myListView.height)
                if (newPosY < myListView.originY) {
                    newPosY = myListView.originY
                }
                anim.running = false
                anim.from = myListView.contentY;
                anim.to = newPosY;
                anim.running = true;
            break;
 
            case "LeftMenuPageDown" :
                newPosY = (myListView.contentY + myListView.height)
                if (newPosY + myListView.height > myListView.contentHeight - myListView.originY) {
                    newPosY = myListView.contentHeight - myListView.height
                }
                anim.running = false
                anim.from = myListView.contentY;
                anim.to = newPosY;
                anim.running = true;
            break;
        }

[Erakis]

Aaah, j'ai trouvé ce qui cause problème !

Code :

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

1
2
 
snapMode: ListView.SnapToItem

Et ça fait du sens ! Le mieux c'est de le désactiver avant l'animation et le réactiver à la fin de l'animation.