Lista rozwijana Qt QML, podobnie jak w HTML

Question

Prosta sprawa, ale nie można jej znaleźć. Chcę proste pole wyboru z kilkoma wyborami. Podobnie jak w HTML

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

jaki jest kod na QML do tego?

Answer 1

Oto prosty przykład, który mógłby być być stosowane jako punkt wyjścia:

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

Jeśli kierowanie urządzeniami Nokia (Symbian lub MeeGo), można użyć wysokiego poziomu Qt Szybki komponentów. Wierzę, że Menu jest czymś podobnym do html-a select.

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

Answer 3

Jeśli kierowania Symbian, istnieje SelectionListItem i SelectionDialog: http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

Answer 4

Dla nowych użytkowników, jest zbudowany w ComboBox w Qt5.3 QtQuick.ControlsComboBox - Reference .

Przykład z dokumentacją:

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

Uwaga: musiałem zakładać go jako odpowiedź, ponieważ tekst jest zbyt długi komentarz.

Answer 5

Używam metod z ComboBoxStyle (ograniczone możliwości dostosowywania) i całkowicie niestandardowych implementacji, ale mają one wiele ograniczeń z zarządzaniem focus i zarządzania z-index.

Kończę się implementacją ComboBox, która składa się z 2 części: nagłówka, który faktycznie umieścisz gdzieś i komponentu rozwijanego, który tworzysz dynamicznie. Ten ostatni składa się z Item obejmującego wszystko (i przechwytujące działanie myszy) oraz rozwijanego menu, które jest starannie umieszczone pod nagłówkiem.

Code jest dość masywny, aby zawarte tu więc widać szczegóły in my blogpost with all the code