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

How to add Button or Switch to current Item in ListView with createComponent/Object function?



  • How to add Button or Switch to current Item in ListView with createComponent/Object function? I want to use currentItem property but it not working for me because i have error "ReferenceError: currentItem is not defined"
    My files:
    mybutton.qml:

    import QtQuick 2.0
    import QtQuick.Controls.Material 2.2
    import QtQuick.Controls 2.2
    
    Button {
        text: "Button"
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.margins: 20
    }
    

    myswitch.qml:

    import QtQuick 2.0
    import QtQuick.Controls.Material 2.2
    import QtQuick.Controls 2.2
    
    Switch{
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.margins: 20
        checked: true
    }
    

    createNewObjectScript.js:

    var component;
    var myswitch;
    
    function addSwitch(id) {
        component = Qt.createComponent("myswitch.qml");
        myswitch = component.createObject(id);
    
        if (myswitch == null) {
            // Error Handling
            console.log("Error creating object");
        }
    }
    
    function addButton(id) {
        component = Qt.createComponent("mybutton.qml");
        myswitch = component.createObject(id);
    
        if (myswitch == null) {
            // Error Handling
            console.log("Error creating object");
        }
    }
    

    main.qml:

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    import "createNewObjectScript.js" as AddToItem
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Scroll")
    
        ScrollView {
            anchors.fill: parent
    
    
            ListView {
                width: parent.width
                model: ListModel{
                    ListElement{
                        type: "category 1"; name: "option 1"
                    }
                    ListElement{
                        type: "category 1"; name: "option 2"
                    }
                    ListElement{
                        type: "category 2"; name: "option 3"
                    }
                    ListElement{
                        type: "category 2"; name: "option 4"
                    }
                }
                delegate: ItemDelegate {
                    text: "Item " + (index + 1)
                    width: parent.width
    
                    Component.onCompleted: {
                        console.log("abba")
                        AddToItem.addSwitch(currentItem)
                        //AddToItem.addButton(currentItem)
                    }
                }
            }
        }
    }
    


  • @Pyroxar Why do you want to use a function? Try this:

    delegate: RowLayout {
        Layout.fillWidth: true
        Text {
            Layout.fillWidth: true
            text: "Item " + (index + 1)
        }
        MySwitch {...}
        MyButton {...}
    }
    

    The delegate doesn't have direct access to the ListView's currentItem. You have to either use the
    ListView.view attached property, or give the ListView an id and access it through that.


  • Qt Champions 2017

    Please note that delegate takes the component as argument and not the object as argument. You can try something like follows.

    Component{
        id : comp
        Item {
            id : tp1
            function giveMeComp(idx){
                console.log(index)
                switch(idx){
                case 0:
                    compo = Qt.createComponent("FirstComp.qml")
                    break;
                case 1:
                    compo = Qt.createComponent("SecondComp.qml")
                    break;
                default :
                    compo = Qt.createComponent("FirstComp.qml")
                    break;
                }
                var obj = compo.createObject(tp1)
                return compo;
            }
            width: parent.width;height: 50
            Component.onCompleted: {
                tp1.giveMeComp(index);
            }
        }
    }
    
    ListView {
        anchors.fill: parent
        spacing: 5;
        model: fruitModel
        delegate:comp
    }


  • Thank you for your answer.
    I have code with no error but my application do not display anything. I can't see any buttons or switches. I know that Item element not have any sizes (width nor height). I think that is problem. Can you help me with this? Why I can see black (empty) space in my application?
    My code:

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Scroll")
    
        ScrollView {
            anchors.fill: parent
    
            Component{
                id: comp
    
                Item {
                    id: myItemId
                    Rectangle{
                        color: "green"
                        anchors.fill: parent
                        Component.onCompleted: {
                            console.log("R"+width)
                            console.log("R"+height)
                        }
                    }
    
    
    
                    function giveMeComp(idx){
                        var mycomponent;
                        console.log(index)
                        switch(idx){
                        case 0:
                            mycomponent = Qt.createComponent("myswitch.qml")
                            if(mycomponent==null)console.log("Error creating component");
                            break;
                        case 1:
                            mycomponent = Qt.createComponent("mybutton.qml")
                            if(mycomponent==null)console.log("Error creating component");
                            break;
                        default :
                            mycomponent = Qt.createComponent("myswitch.qml")
                            if(mycomponent==null)console.log("Error creating component");
                            break;
                        }
                        var obj = mycomponent.createObject(myItemId)
                        if (obj == null) {
                            console.log("Error creating object");
                        }
                        console.log(mycomponent)
                        return mycomponent;
                    }
    
                    Component.onCompleted: {
                        myItemId.giveMeComp(index);
                        console.log("I"+width)
                        console.log("I"+height)
                    }
                }
            }
    
            ListView {
                anchors.fill: parent
                spacing: 5;
                model: [1,0,1]
                delegate:comp
            }
    
            /*ListView {
                width: parent.width
                model: ListModel{
                    ListElement{
                        type: "category 1"; name: "option 1"
                    }
                    ListElement{
                        type: "category 1"; name: "option 2"
                    }
                    ListElement{
                        type: "category 2"; name: "option 3"
                    }
                    ListElement{
                        type: "category 2"; name: "option 4"
                    }
                }
                delegate: ItemDelegate {
                    text: "Item " + (index + 1)
                    width: parent.width
    
                    Component.onCompleted: {
                        console.log("abba")
                        AddToItem.addSwitch(currentItem)
                        //AddToItem.addButton(currentItem)
                    }
                }
            }*/
        }
    }
    

  • Qt Champions 2017

    Item does not have width & or height. Please specify some size. Also give spacing in ListView using spacing property.


Log in to reply