Discussion :

[ymoreau]

Bonjour,
J'ai eu besoin d'une combobox dans mon application pour afficher une liste de langues disponibles. Il me faut à la fois le nom de la langue et un drapeau sous forme d'icône.
La ComboBox native de QtQuick ne permet pas d'insérer un icône d'après mes recherches, même en personnalisant le ComboBoxStyle. (Ai-je loupé quelque chose?)

J'ai donc fait un composant de zéro affichant soit un Item pour montrer l'élément courant, soit une ListView dans une ScrollView pour montrer les choix disponibles (masquée par défaut). Lorsqu'on clique sur l'élément courant il est masqué et la liste est affichée à la place en débordant vers le bas. Je valide la sélection avec une MouseArea sur chaque élément de ma liste, et une fois validé la liste est à nouveau masquée et l'élément courant est affiché à la place (après avoir été mis à jour).
Tout ça fonctionne bien.

Mon problème, j'aimerais "fermer" la combobox lorsque l'on clique ailleurs que sur un de ses éléments (le comportement classique avec une QComboBox et également avec la ComboBox native). Je ne trouve pas de moyen de faire ça. J'ai essayé de détecter la perte de focus mais elle ne semble pas avoir lieu (le seul changement de focus que je vois passer et quand j'appelle explicitement forceActiveFocus), j'ai essayé de mettre une MouseArea sur toute la fenêtre de mon appli mais comment le onClicked de cette zone et ma combobox qui est une "nièce" de cette MouseArea (sans compter que le propagateComposedEvents n'inclut pas les simpleEvents, et que mes mousePressed etc ne sont plus détectés par le reste de l'appli). Bref je suis à court d'idée, si vous avez une piste ou même une façon radicalement différente de faire ma combobox, je suis preneur ! merci d'avance

[Amnell]

Bonsoir,

De mon côté, quand il s'agit de faire une combobox en QML depuis les items de base (ListView, etc.), je passe par focus sur l'item toujours visible (celui où s'affiche le choix actuel) pour déplier ou non le contenu. De là, avec une MouseArea définie en-dessous ayant visible: listview.focus, ça permet de perdre le focus.

Par rapport à ComboBoxStyle, par contre, je pense qu'il est tout à fait possible de greffer une image :

• Dans le ListModel passé au ComboBox, insérer également un image: "chemin/vers/le/drapeau.png" ;
• Définir un nouveau ComboBoxStyle ;
• Dans ce nouveau style, exploiter la propriété "label" pour créer un composant contenant à la fois un label et l'icône à gauche, à l'aide de "text" et "image" précédemment définis.

Je ne sais pas si cela peut fonctionner, par contre, c'est juste théorique.

Bonne soirée,
Louis

[ymoreau]

J'avais essayé de modifier ComboBoxStyle mais je n'arrivais à rien qui fonctionne, c'est très possible que je m'y sois mal pris mais la doc est un peu limitée sur ce sujet je trouve. En regardant les sources des composants je n'ai pas réussi non plus, mais mes connaissances du langage QML sont encore bien limitées. Je m'y pencherai peut être si j'ai du temps mais avec tout ce qui est déjà fait et qui fonctionne j'aurais préféré régler ce problème de focus et en rester là.

Mais je n'ai pas bien compris ta technique avec le focus. Quand j'ai mes essais, le focus ne change pas quand on clique sur des éléments.

[Amnell]

Bonjour,

J'ai codé un petit truc pour vous montrer comment marche ComboBoxStyle :

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
25
ComboBox {
    currentIndex: 0
    model: ListModel {
        id: cbItems
        ListElement { text: "Français"; image: "qrc:/flag_fr.png" }
        ListElement { text: "English"; image: "qrc:/flag_en.png" }
    }
    width: 200
    style: ComboBoxStyle {
        label: Item {
            Image {
                anchors.left: parent.left
                anchors.leftMargin: 5
                anchors.verticalCenter: parent.verticalCenter
                source: control.model.get(control.currentIndex).image
            }
 
            Text {
                x: 60
                text: control.currentText
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }
}

Le rendu :



Le souci est que sur le dropdown, on n'a pas le style du fait que ce ne soit apparemment pas customizable pour l'instant. Il y a un post sur le forum officiel qui traite du sujet, mais je ne suis pas allé chercher plus loin : http://forum.qt.io/topic/32611/how-t...ick-controls/7.

Si vous souhaitez, je peux vous faire également une démo en QML classique sans les QtQuickControls, avec la gestion de focus.

Bonne journée,
Louis

[ymoreau]

J'étais déjà tombé sur cette discussion sans réussir à faire fonctionner quelque chose, et j'avais en effet justement bloqué sur le dropdown. Je referai une tentative de modifier le style quand j'aurai du temps (et avec un peu de chance un oeil plus avisé sur la syntaxe). Je reviendrai poster si j'arrive à quelque chose.

Merci pour ton aide !