Qt QML liste déroulante comme dans le HTML

Chose Simple, mais ne peut pas obtenir le trouver. Je veux une simple liste déroulante de sélection de la boîte avec un couple de sélections. Comme dans le HTML

<select>
<option>1</option>
<option>2</option>
</select>

qu'est-ce que le code QML pour qui ?

Aussi étrange que cela peut paraître, il n'y a pas de "builtin" zone de liste déroulante en QML. Vous devez construire vous-même en utilisant d'autres primitives. Il y a beaucoup d'exemples bien.
en effet très étrange :S

OriginalL'auteur Mathlight | 2012-03-09

  1. 14

    Voici un exemple simple qui pourrait peut-être être utilisé comme un point de départ:

    import QtQuick 1.0
Rectangle {
width:400;
height: 400;
Rectangle {
id:comboBox
property variant items: ["Item 1", "Item 2", "Item 3"]
property alias selectedItem: chosenItemText.text;
property alias selectedIndex: listView.currentIndex;
signal comboClicked;
width: 100;
height: 30;
z: 100;
smooth:true;
Rectangle {
id:chosenItem
radius:4;
width:parent.width;
height:comboBox.height;
color: "lightsteelblue"
smooth:true;
Text {
anchors.top: parent.top;
anchors.left: parent.left;
anchors.margins: 8;
id:chosenItemText
text:comboBox.items[0];
font.family: "Arial"
font.pointSize: 14;
smooth:true
}
MouseArea {
anchors.fill: parent;
onClicked: {
comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
}
}
}
Rectangle {
id:dropDown
width:comboBox.width;
height:0;
clip:true;
radius:4;
anchors.top: chosenItem.bottom;
anchors.margins: 2;
color: "lightgray"
ListView {
id:listView
height:500;
model: comboBox.items
currentIndex: 0
delegate: Item{
width:comboBox.width;
height: comboBox.height;
Text {
text: modelData
anchors.top: parent.top;
anchors.left: parent.left;
anchors.margins: 5;
}
MouseArea {
anchors.fill: parent;
onClicked: {
comboBox.state = ""
var prevSelection = chosenItemText.text
chosenItemText.text = modelData
if(chosenItemText.text != prevSelection){
comboBox.comboClicked();
}
listView.currentIndex = index;
}
}
}
}
}
Component {
id: highlight
Rectangle {
width:comboBox.width;
height:comboBox.height;
color: "red";
radius: 4
}
}
states: State {
name: "dropDown";
PropertyChanges { target: dropDown; height:40*comboBox.items.length }
}
transitions: Transition {
NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
}
}
}
    a juste une chose bizarre, j'ai un couple d'options (en ce moment 5). Et quand je choisis l'option 3, je ne vois pas 1 et 2 plus :S ce n'est que je dois changer????
    srr, n'a pas bien lu 😛 la ligne que j'ai eu à removve wass listView.currentIndex = index; de la mousearea. Très bien merci pour le morceau de code 😛
    Comment puis-je accéder à selectedIndex à partir de fichier qui contient ce code?

    OriginalL'auteur Paul Drummond

  2. 7

    Pour les nouveaux utilisateurs, il est construit en ComboBox en Qt5.3 QtQuick.Les contrôles Zone De Liste Déroulante De Référence.

    Exemple à partir de la Documentation:

    import QtQuick 2.2
import QtQuick.Controls 1.2
ComboBox {
id: combo
editable: true
model: ListModel {
id: model
ListElement { text: "Banana"; color: "Yellow" }
ListElement { text: "Apple"; color: "Green" }
ListElement { text: "Coconut"; color: "Brown" }
}
onAccepted: {
if (combo.find(currentText) === -1) {
model.append({text: editText})
currentIndex = combo.find(editText)
}
}
}

    Note: j'ai dû poster comme une réponse, puisque le texte est trop long pour un commentaire.

    OriginalL'auteur RajaRaviVarma

  3. 1

    J'ai été en utilisant des approches avec ComboBoxStyle (capacités de personnalisation limitée) et complètement personnalisé implémentations, mais ils ont beaucoup de limitations avec focus de gestion et de z-index de gestion.

    J'ai jusqu'à la fin avec la mise en œuvre de ComboBox qui se compose de 2 parties: un en-tête qui vous fait mettre quelque part et un élément déroulant qui vous créez dynamiquement. Ce dernier se compose d'un Item couvrant tout (et de l'interception de la souris) et une liste déroulante qui est soigneusement placés au-dessous de l'en-tête.

    Code est assez massif pour inclus ici, donc vous pouvez voir les détails dans mon article sur le blog avec tout le code

    Bien que éhontée blog de la publicité, Il semble que vous avez répondu à ma question. Je ne suis pas en utilisant qt plus, donc je ne peux pas tester ton code, mais il semble prometteur. Je ne pense cependant, que cela pourrait aider quelqu'un dans le futur avec ce problème. Donc je ne vais pas le drapeau de votre réponse, parce qu'il a du potentiel 😉
    L'exemple de code est assez gros pour être inclus ici. Idée qui peut résoudre vos problèmes est expliqué dans ma réponse donc si quelqu'un a QML des compétences que vous pouvez comprendre ce que j'ai écrit (sans passer par mon sans vergogne annoncé blog).

    OriginalL'auteur Ribtoks

  4. 0

    Si vous en ciblant les appareils Nokia (Symbian ou Meego), vous pouvez utiliser le haut niveau de Qt Quick composants. Je crois Menu est quelque chose de semblable à de l'html select.

    Voir http://doc.qt.nokia.com/qt-components-symbian/qml-menu.html ou http://harmattan-dev.nokia.com/docs/library/html/qt-components/qt-components-meego-menu.html

    je veux le rendre compatible cul posible pour toutes les plateformes, je vais donc coller avec celui-ci 😉

    OriginalL'auteur sergk

  5. 0

    Si vous ciblez Symbian, il y a SelectionListItem et SelectionDialog:
    http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

    je veux le rendre compatible cul posible pour toutes les plateformes, je vais donc coller avec celui-ci 😉

    OriginalL'auteur sabbour