Qt QML раскрывающийся список, как в HTML

Question

Простая вещь, но не могу найти ее. Я хочу простой отсек выбора с несколькими вариантами выбора. Как в 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

Если вы нацеливание Nokia устройств (Symbian или MeeGo), вы можете использовать высокоуровневые Qt Quick компонентов. Я считаю, Menu что-то похожее на html's 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, которая состоит из двух частей: заголовка, который вы фактически размещаете где-то, и выпадающего компонента, который вы создаете динамически. Последнее состоит из Item, охватывающего все (и перехватывающего действия мыши), и выпадающего меню, которое расположено под заголовком.

Код довольно солидный включался здесь, так что вы можете увидеть детали in my blogpost with all the code