Qt QML lista desplegable como en HTML

Simple thing, but can't get find it. I want a simple dropdown selection box with a couple of selections. Like in HTML

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

what is the code for QML for that ?

preguntado el 09 de marzo de 12 a las 13:03

As strange as it may seems, there is no "builtin" combobox in QML. You have to build it yourself using other primitives. There are plenty of examples, though. -

5 Respuestas

Here's a simple example that could maybe be used as a starting point:

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

respondido 09 mar '12, 14:03

got just one weird thing, i've got a couple of options (at the moment 5). And when i selected option 3, i don't see 1 and 2 anymore :S what does i have to change???? - Matemáticas

srr, didn't read well :P the line that i had to removve wass listView.currentIndex = index; of the mousearea. Very much thanks for the piece of code :P - Matemáticas

How can I access to selectedIndex from out of file that contain this code? - 2

For new users, there is a built in ComboBox in Qt5.3 QtQuick.Controls ComboBox - Reference.

Example from 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: I had to post it as an answer, since the text is too long for a comment.

Respondido 14 Jul 14, 11:07

I've been using approaches with ComboBoxStyle (customization capabilities limited) and completely custom implementations, but they have a lot of limitations with focus administración y z-index gestión.

I've end up with the implementation of ComboBox which consists of 2 parts: a header which you actually put somewhere and a dropdown component which you create dynamically. The latter consists of an Item covering everything (and intercepting mouse activity) and a dropdown which is carefully positioned below the header.

Code is pretty massive to included here so you can see details in my blogpost with all the code

respondido 22 nov., 17:22

Although it's shameless blog advertisement, It does seem that you've answered my question though. I'm not using qt anymore, so I can't test your code, but it looks promising. I do think however, that this could help somebody in the future with this problem. Therefore I won't flag your answer, because it has potential ;-) - Matemáticas

@Mathlight Example code is quite big to be included here. Idea which can solve your problems is explained in my answer so if one has QML skill you can understand what I wrote (without going to my shamelessly advertised blog). - Ribtoks

If you targeting Nokia devices (Symbian or Meego), you could use high-level Qt Quick components. I believe Menu is something similar to html's select.

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

respondido 10 mar '12, 17:03

i want to make it compatible ass posible for all platforms, so i will stick with this one ;) - Matemáticas

If you are targeting Symbian, there is SelectionListItem and SelectionDialog: http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

respondido 11 mar '12, 13:03

i want to make it compatible ass posible for all platforms, so i will stick with this one ;) - Matemáticas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.