Affichage conditionnel d'une image

Bonjour à tous,

Je réalise une petite interface qui donne le choix à son utilisateur entre 3 destinations: maison, travail, aéroport (ce sont des exemples).
Le but est d'afficher l'image du trajet en fonction du choix de l'utilisateur (ce choix est validé à l'aide de la touche Entrée)

Pour cela j'ai déjà codé la "logique conditionnelle":

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Keys.onReturnPressed: {                 if(navigation_menu_view.currentIndex == 0) {                     console.log(navigation_menu_view.currentIndex)                     //afficher l'image desti_maison                 }                 if(navigation_menu_view.currentIndex == 1) {                     console.log(navigation_menu_view.currentIndex)                     //afficher l'image desti_travail                 }                 if(navigation_menu_view.currentIndex == 2) {                     console.log(navigation_menu_view.currentIndex)                     //afficher l'image desti_aeroport                 }             }

---

navigation_menu_view est le nom de mon Pathview qui contient les trois choix (1 bouton = 1 destination).
Et l'instruction console.log(navigation_menu_view.currentIndex) me permet simplement de voir dans la fenêtre Sortie de l'application que le choix a été validé.

Alors voilà, en commentaire ce que j'aimerai faire. Est ce la bonne méthode, et comment afficher l'image maintenant ?

Merci d'avance ;)

:salut:

En théorie ta manière de faire fonctionne. Cependant tu sors un peu de la logique déclarative de QML.

Si j'ai bien compris ton besoin, une manière simple et déclarative serait de créer un ListModel, prenant autant de ListElement que de destination, chaque ListElement ayant comme propriété un texte et un chemin vers une image.

Ensuite tu crées, par exemple un ComboBox affichant les destinations disponibles et tu le lies à ton image

Voici un petit exemple pour le principe (tout à l'heure je n'étais pas sur mon PC donc plus compliqué ^^) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import QtQuick 2.4 import QtQuick.Controls 1.3   Rectangle { width: 200 ; height: 200 ListModel {id: listModel ListElement {dest:"Destination 1" ; img:"/chemin1"} ListElement {dest:"Destination 2" ; img:"/chemin2"} ListElement {dest:"Destination 3" ; img:"/chemin3"} } ComboBox { id: combo x: 5; y: 5 model: listModel textRole: "dest" } Label { id: image y: 50 text: listModel.get(combo.currentIndex).img } }

---

Et voila ;-)

[EDIT]
J'ai utilisé un Label, mais dans ton cas c'est la propriété source d'une Image qu'il faudra utiliser.

De plus, pour plus de simplicité j'ai pris un ListModel, mais pour ton appli tu devras peut-être passer par autre chose comme un XmlListModel. Gros avantage de QML : si tu sais le faire avec l'un tu sauras le faire avec l'autre facilement.

:salut:

Citation:

---

Envoyé par Jiyuu

Cependant tu sors un peu de la logique déclarative de QML.

---

Je dirais même plus : le code d'origine n'est pas très modulaire ;). De manière générale, il vaut mieux créer une structure de données que de coder en dur. Ici, un vecteur est approprié : il permet de lister des éléments (ici, des images), avec un ordre. Au lieu de faire un test sur la valeur de navigation_menu_view.currentIndex, ça revient à indexer le vecteur.

Ça, c'était pour du code général. La solution de Jiyuu en est une application dans le cas de code QML.