Выпадающий список Qt QML, как в HTML

простая вещь, но не могу найти его. Мне нужен простой раскрывающийся список с несколькими вариантами. Как в HTML 

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

каков код для QML для этого ?

7
drop-down-menu qml qt qt-creator

5 ответов

вот простой пример, который может быть использован в качестве отправной точки:

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

для новых пользователей, есть встроенный ComboBox в Qt5.3 наш QtQuick.Управление ComboBox-Ссылка.

пример из документации:

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

Примечание: я должен был разместить его в качестве ответа, так как текст слишком длинный для комментария.

7

я использовал подходы с ComboBoxStyle (возможности настройки ограничены) и полностью пользовательские реализации, но у них есть много ограничений с focus управления и z-index управление.

Я в конечном итоге с осуществлением ComboBox который состоит из 2 частей: заголовок, который вы фактически помещаете куда-то, и раскрывающийся компонент, который вы создаете динамически. Последний состоит из Item охватывая все (и перехватывая активность мыши) и раскрывающийся список, который тщательно расположен под заголовком.

код довольно массивный, чтобы включить здесь, чтобы вы могли видеть детали в моем блоге со всем кодом

1

Если вы нацелены на устройства Nokia (Symbian или 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

0

Если вы нацелены на Symbian, есть SelectionListItem и SelectionDialog: http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

0