Qt QML ड्रॉपडाउन सूची की तरह HTML में




drop-down-menu qt-creator (4)

सरल चीज है, लेकिन इसे पा सकते हैं। मुझे कुछ चयनों के साथ एक सरल ड्रॉपडाउन चयन बॉक्स चाहिए। जैसे HTML में

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

इसके लिए क्यूएम के लिए कोड क्या है?


यदि आप नोकिया डिवाइस (सिम्बियन या मेगो) को लक्षित करते हैं, तो आप उच्च-स्तरीय क्यूटी क्विक घटक का उपयोग कर सकते हैं। मेरा मानना ​​है कि 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


नए उपयोगकर्ताओं के लिए, क्यूटी 5 में कम्बो ComboBox में बनाया गया है। QtQuick.Controls 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)
   }
 }
}

नोट: मुझे इसे एक उत्तर के रूप में पोस्ट करना पड़ा क्योंकि पाठ टिप्पणी के लिए बहुत लंबा है।


मैं ComboBoxStyle (अनुकूलन क्षमताओं सीमित) और पूरी तरह से कस्टम कार्यान्वयन के साथ दृष्टिकोण का उपयोग कर रहा हूं, लेकिन उनके पास focus प्रबंधन और z-index प्रबंधन के साथ बहुत सी सीमाएँ हैं

मैंने ComboBox के कार्यान्वयन के साथ समाप्त किया है जिसमें 2 भागों शामिल हैं: एक हैडर जिसे आप वास्तव में कहीं और एक ड्रॉपडाउन घटक बनाते हैं जो आप गतिशील बनाते हैं। उत्तरार्द्ध में सब कुछ (और माउस गतिविधि को अवरुद्ध) और एक ड्रॉपडाउन शामिल है जो सावधानी से शीर्ष लेख के नीचे स्थित है।

कोड यहां बहुत बड़ा है ताकि आप अपने ब्लॉगपोस्ट में सभी कोड के साथ विवरण देख सकें


यहां एक सरल उदाहरण दिया जा सकता है जो प्रारंभिक बिंदु के रूप में इस्तेमाल किया जा सकता है:

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




qml