How to add a check box or line edit elements in a combo box in Qt Quick
-
I want to add several elements (such as, checkbox, line edit) in a combo box, and when i select any option, by pressing a show_dialog button i should be able to see a checkbox or a line edit in the dialog.
If some one can please provide a small QML example it would be very nice.
Thank you !!!!!
-
Do you want the actual visual display of "Checkbox" "LineEdit" when the combo box is expanded ?
You can look at ComboBoxStyle for this. Instead of this you can write you own component to display these items. Based on mouseArea you can launch whatever you want.
OR
If you want just the names of "Checkbox" and "LineEdit" in ComboBox, it straight forward. You can check the documentation on how to create combobox and handle the signals. -
No, I dont need to have visual display of checkbox and line edit.
I just want to have something like this.
For example:My combobox has 2 name, "chkbx"(symbolic name for the checkbox), "txtedt"(symbolic name for the text field).
Whenever i select chkbox or txtedt from combobox, then my combo box should connect me to actual checkbox and textedit element respectively.
I have a "show dialog" button on status bar when i press that button it should popup selected option(checkbox or line edit)
Please suggest me how can i do it
-
You can try with this. Popup is done with opacity here. I have done for only one item. Popups can be done with dynamic object creation as well.
@Rectangle {
width: 360
height: 360
ComboBox {
id : cbox
currentIndex: 0
model: ListModel {
id: cbItems
ListElement { text: "CheckBox"; color: "Yellow" }
ListElement { text: "SpinBox"; color: "Green" }
}
width: 200
onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle {
width: 100
height: 50
color: "red"
visible: true
opacity: 0
anchors.centerIn: parent
id :chk
CheckBox {
id : chk1
visible: true
anchors.centerIn: parent
}
SequentialAnimation {
id: chkAnim
NumberAnimation { target: chk; property:"opacity"; to: 1; duration: 1000 }
PauseAnimation { duration: 2000 }
NumberAnimation { target: chk; property:"opacity"; to: 0; duration: 1000 }
}
}SpinBox { decimals: 2 visible: false } Rectangle{ id : file width: 100 height: 40 radius: 10 color : "blue" border.width: 2 Text { anchors.centerIn: parent text : "Click Me" } anchors.top: cbox.bottom anchors.horizontalCenter: cbox.horizontalCenter anchors.topMargin: 50 MouseArea { anchors.fill: parent onClicked: { console.log(cbItems.get(cbox.currentIndex).text); var str = cbItems.get(cbox.currentIndex).text; if (str === "CheckBox") chkAnim.start() } } }}@
-
Hi Dheerendra,
Thanks a lot but still its not what i am trying to acheive. I am posting my code, please have a look.
Here is the code and the problem i am facing with combobox options is, neither i am not able to get icons in my message dialog nor i dont know how i can see checkbox or line edit in message dialog, i am a beginner and struggling to explore the tricky ways used in QML.
@import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.0Item { id: root width: 580 height: 400 SystemPalette { id: palette } clip: true //! [messagedialog] MessageDialog { id: messageDialog visible: messageDialogVisible.checked modality: messageDialogModal.checked ? Qt.WindowModal : Qt.NonModal title: windowTitleField.text text: customizeText.checked ? textField.text : "" informativeText: customizeInformativeText.checked ? informativeTextField.text : "" onButtonClicked: console.log("clicked button " + clickedButton) onAccepted: lastChosen.text = "Accepted " + (clickedButton == StandardButton.Ok ? "(OK)" : (clickedButton == StandardButton.Retry ? "(Retry)" : "(Ignore)")) onRejected: lastChosen.text = "Rejected " + (clickedButton == StandardButton.Close ? "(Close)" : (clickedButton == StandardButton.Abort ? "(Abort)" : "(Cancel)")) onHelp: lastChosen.text = "Yelped for help!" onYes: lastChosen.text = (clickedButton == StandardButton.Yes ? "Yeessss!!" : "Yes, now and always") onNo: lastChosen.text = (clickedButton == StandardButton.No ? "Oh No." : "No, no") } //! [messagedialog] Column { anchors.fill: parent anchors.margins: 12 spacing: 8 Text { color: palette.windowText font.bold: true text: "Message dialog properties:" } CheckBox { id: messageDialogModal text: "Modal" checked: true Binding on checked { value: messageDialog.modality != Qt.NonModal } } CheckBox { id: customizeTitle text: "Window Title" checked: true width: parent.width TextField { id: windowTitleField anchors.right: parent.right width: informativeTextField.width text: "Alert" } } Row { Text { text: "Combo box items and icon selection:" } spacing: 8 function createIcon(str) { switch(str) { case Critical: messageDialog.icon = StandardIcon.Critical console.log("Critical") break; case Question: messageDialog.icon = StandardIcon.Question break; case checkbox: //how to add checkbox here in order to show it in my message dialog ? break; case textedit: //how to add textedit here in order to show it in message dialog ? break; default: break } } ComboBox { id : cbox editable: true currentIndex: 0 model: ListModel { id: cbItems ListElement { text: "Critical"} ListElement { text: "Question"} ListElement { text: "checkbox"} ListElement { text: "textedit"} } onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text) onAccepted: parent.createIcon(cbItems.get(currentIndex).text) } } Rectangle { anchors { left: parent.left right: parent.right bottom: parent.bottom } height: buttonRow.height * 1.2 color: Qt.darker(palette.window, 1.1) border.color: Qt.darker(palette.window, 1.3) Row { id: buttonRow spacing: 6 anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 12 width: parent.width Button { text: "Show Dialog" anchors.verticalCenter: parent.verticalCenter onClicked: messageDialog.open() } Button { text: "Close" anchors.verticalCenter: parent.verticalCenter onClicked: messageDialog.close() } } } }@
