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.0

    Item {
        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()
                }
            }
    
                }
            }
    

    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.