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

Dynamically override contentItem of a ComboBox



  • Hi,
    is it possible to dynamically override the contentItem of a ComboBox (QtQuick 2.6 / QtQuick.Controls 2.2) ?

    I'd like to have formatting stuff like elide... and bold when it's not editable, but I need it to be editable sometimes.

    Of course, it's not as easy as the (more pseudo-) code below. But is there a chance?

        ComboBox {
            [...]
            contentItem: !editable ? Text {
                text: cbx.displayText
                font: cbx.font
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            } : TextInput {
                [...]
            }
        }
    

  • Moderators

    @SeDi
    use a Loader element as the contentItem and switch it's source like you have shown in your example code



  • @raven-worx BAM. Thank you. :-)



  • Works perfectly. Thanks again. Here's - more or less (I've shortened it, there's more to the component) - what works for me:

    Rectangle {
        id: base
        property alias currentIndex: cbx.currentIndex
        property string currentText: displayText
        property alias model: cbx.model
        property alias textRole: cbx.textRole
        property alias displayText: cbx.displayText
        property alias highlightedIndex: cbx.highlightedIndex
        property alias indicator: cbx.indicator
        property alias count: cbx.count
        property alias delegate: cbx.delegate
        property alias popup: cbx.popup
        property alias pressed: cbx.pressed
        property alias description: txt.text
        property real spacing: Geo.dp(5)
        property bool labelRight: true
        property color textColor: "black"
        property alias backColor: backRec.color
        property alias editable: cbx.editable
        signal highlighted();
        signal activated();
    
        implicitWidth: childrenRect.width
    
        function find(text, flags) { return cbx.find(text,flags) }
        function selectAll() { cbx.selectAll() }
        function decrementCurrentIndex() { cbx.decrementCurrentIndex() }
        function incrementCurrentIndex() { cbx.incrementCurrentIndex() }
        function textAt() { return cbx.textAt(index) }
    
        ComboBox {
            id: cbx
            onActivated: base.activated()
            onHighlighted: base.highlighted()
            contentItem: Loader {
                sourceComponent: editable ? textInputEditable : textNotEditable
            }
            onCurrentTextChanged: base.currentText = currentText
        }
        Component {
            id: textNotEditable
            Text {
                leftPadding: 0
                rightPadding: cbx.indicator.width + cbx.spacing
                text: cbx.displayText
                font: cbx.font
                color: cbx.pressed ? Qt.darker(base.textColor) : base.textColor
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
        }
        Component {
            id: textInputEditable
            TextInput {
                id: textInput
                leftPadding: 0
                rightPadding: cbx.indicator.width + cbx.spacing
                text: cbx.displayText
                onTextChanged: base.currentText = text
                font: cbx.font
                color: cbx.pressed ? Qt.darker(base.textColor) : base.textColor
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }
        }
    }
    

Log in to reply