Elenco a discesa Qt QML come in HTML

Question

Semplice, ma non riesci a trovarlo. Voglio una semplice casella di selezione a discesa con un paio di selezioni. Come in HTML

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

qual è il codice per QML per questo?

Answer 1

Ecco un semplice esempio che potrebbe forse essere utilizzato come punto di partenza:

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

Se targeting dispositivi Nokia (Symbian o Meego), è possibile utilizzare ad alto livello componenti Qt rapidi. Credo che Menu sia simile a quello di html select.

Vedi 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

Se si prendono di mira Symbian, c'è SelectionListItem e SelectionDialog: http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

Answer 4

Per i nuovi utenti, v'è una costruito in ComboBox in Qt5.3 QtQuick.ControlsComboBox - Reference .

Esempio da documentazione:

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: ho dovuto pubblicarlo come una risposta, dal momento che il testo è troppo lungo per un commento.

Answer 5

Sto usando approcci con ComboBoxStyle (capacità di personalizzazione limitati) e implementazioni completamente personalizzati, ma hanno un sacco di limitazioni con focus gestione e z-index gestione.

Mi sono ritrovato con l'implementazione di ComboBox che consiste di 2 parti: un'intestazione che viene effettivamente inserita da qualche parte e un componente a discesa creato in modo dinamico. Quest'ultimo è costituito da un Item che copre tutto (e intercetta l'attività del mouse) e un menu a discesa che viene accuratamente posizionato sotto l'intestazione.

codice è piuttosto massiccia a inclusi qui in modo da poter vedere i dettagli in my blogpost with all the code