Qt QML下拉列表，如HTML中的

Question

简单的事情，但无法找到它。我想要一个简单的下拉选择框和几个选择。 Like in HTML

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

QML的代码是什么？

Answer 1

这里有一个简单的例子，也许可以作为一个起点：

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

如果针对诺基亚设备（塞班或Meego的），你可以使用高层次的Qt Quick的组件。我相信Menu类似于html的select。

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

Answer 3

如果你是针对Symbian的，有SelectionListItem和SelectionDialog： http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

Answer 4

对于新用户来说，有一个建于ComboBox在Qt5.3 QtQuick.ControlsComboBox - Reference 。从文档

例子：

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

注：我不得不将它张贴作为一个答案，因为文字是注释太长。

Answer 5

我一直在使用与ComboBoxStyle（有限的定制能力）和完全自定义的实现方法，但他们有一个很大的局限性与focus管理和z-index管理。

我已经完成了ComboBox的实现，它由2部分组成：实际放置在某处的头部和动态创建的下拉部件。后者由覆盖所有内容（并拦截鼠标活动）的Item以及精心定位在标题下的下拉列表组成。

代码是非常巨大的，以包括在这里，所以你可以看到细节in my blogpost with all the code