ListView - Item pour Page Up/Down

Version imprimable

01/05/2015, 16h37
Erakis

1 pièce(s) jointe(s)

ListView - Item pour Page Up/Down
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 :

Pièce jointe 176638

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

Bonjour,

Code:

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
            }
        }
    }
}

Code:

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"
    }
}

02/05/2015, 00h32
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.
02/05/2015, 01h03
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

Merci pour votre aide, c'est gentil.

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

Code:

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:

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:

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;
        }

05/05/2015, 15h23
Erakis
Aaah, j'ai trouvé ce qui cause problème !
Code:

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.