Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Hide a display on a top pf a comboBox when model data is updated



  • Hello.

    I would like to hide a display that I selected on a top pf a comboBox when model data is updated.

    But I don't know how to do that because I could not hide a display.

    For example,I would like to do below:
    1.open a comboBox app.
    2.push a top of the comboBox.
    3.display a list on the comboBox.
    4.select one of the list.
    5.display one of the list on the top of comboBox.
    6.update model by C++.
    7.hide the display of the top.

    Below is my sample QML code. I don't understand which part I should improve.

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12

    ComboBox {
    id: control
    property alias control:control
    property string sendMsg
    signal comboClicked

    model: combo1
    delegate: ItemDelegate {
        id:itemDelegate
        width: control.width
        contentItem: Text {
            id:delegateContentItemText
            text: model.data1
            color: "#e6e6e6"
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index
        onClicked: {
            displayText = combo1.get(index).data1
            sendMsg = sendMsg = index +1
            comboClicked()
        }
    
        background: Rectangle {
            color:itemDelegate.hovered ?  "#005500" : "#000000"
        }
    }
    
    indicator: Image {
        id: image
        sourceSize.height: 66
        sourceSize.width: 35
        anchors.top: parent.top
        anchors.topMargin: 2
        anchors.right: parent.right
        anchors.rightMargin: 0
        source: "../assets/comboBoxSymbol.png"
    }
    
    contentItem: Text {
        id: controlContentItem
        objectName: "controlContentItem"
        leftPadding: 0
        rightPadding: control.indicator.width + control.spacing
        anchors.left: parent.left
        anchors.leftMargin: 10
        text: control.count >=1 ? control.displayText : ""  // I failed to implement .
        font: control.font
        color: control.pressed ? "#c3c3c3" : "#c3c3c3"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }
    
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40
        color: "#040404"
        border.color: control.pressed ? "#c3c3c3" : "#c3c3c3"
        border.width: control.visualFocus ? 4 : 3
        radius: 2
    }
    
    popup: Popup {
        id:pop
        y: control.height - 1
        width: control.width
        implicitHeight: contentItem.implicitHeight
        padding: 1
    
        contentItem: ListView {
            id:list
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex
    
            ScrollIndicator.vertical: ScrollIndicator { }
        }
    
        background: Rectangle {
            color: "#040404"
            border.color: "#040404"
            radius: 2
        }
    }
    

    }

    Could you tell me how to improve it ?


Log in to reply