Qt QML lista desplegable como en HTML

Question

Lo simple, pero no puede conseguirlo. Quiero un simple cuadro de selección desplegable con un par de selecciones. Al igual que en HTML

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

¿cuál es el código de QML para eso?

Answer 1

Aquí está un ejemplo sencillo que tal vez podría ser utilizado como punto de partida:

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

Answer 2

Si la orientación dispositivos Nokia (Symbian o Meego), se puede utilizar componentes de alto nivel Qt Quick. Creo que Menu es algo similar a html select.

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

Answer 3

Si el idioma de Symbian, hay SelectionListItem y SelectionDialog: http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

Answer 4

Para los nuevos usuarios, hay una construida en ComboBox en Qt5.3 QtQuick.ControlsComboBox - Reference .

Ejemplo de Documentación:

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

Nota: que tenía que escribir como una respuesta, ya que el texto es demasiado largo para un comentario.

Answer 5

He estado usando enfoques con ComboBoxStyle (capacidades de personalización limitadas) y las implementaciones completamente personalizadas, pero tienen muchas limitaciones con la administración focus y la administración z-index.

Terminé con la implementación de ComboBox que consta de 2 partes: un encabezado que realmente coloca en algún lugar y un componente desplegable que crea dinámicamente. Este último consiste en un Item que cubre todo (e intercepta la actividad del mouse) y un menú desplegable que se coloca cuidadosamente debajo del encabezado.

Código es bastante masivo para incluirse aquí para que pueda ver los detalles in my blogpost with all the code