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

Pyroxar

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)
                }
            }
        }
    }
}

Tom_H

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

dheerendra

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
}

Pyroxar

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)
                }
            }
        }*/
    }
}

dheerendra

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