failed to assigned loader source component

[joko]

Hi Qt Experts,

I have a model with page element that will determine which component to be displayed in the delegate using loader.
I encountered this error "Unable to assign QString to QQmlComponent*"
Is my implementation correct? Is there any efficient way to do it?
And also, how to change the page after swiping the last element?
Btw, there is a main loader that called the Wizard.qml. Should I just change the main loader source?

Please advise. Thanks

Here's my code:

//Wizard.qml
Item {
    ListModel {
        id: wizardModel
        ListElement {
            page: "page1"
        }
        ListElement {
            page: "page2"
        }
        ListElement {
            page: "page3"
        }
    }
 
    ListView {
        anchors.fill: parent
        focus: true
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model: wizardModel
        delegate: WizardDelegate {}
    }
}

//Wizard.qml
Item {
    ListModel {
        id: wizardModel
        ListElement {
            page: "page1"
        }
        ListElement {
            page: "page2"
        }
        ListElement {
            page: "page3"
        }
    }

    ListView {
        anchors.fill: parent
        focus: true
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model: wizardModel
        delegate: WizardDelegate {}
    }
}

To copy to clipboard, switch view to plain text mode 

//WizardDelegate.qml
Item
{
    id: root
    width: ListView.view.width; height: ListView.view.height
 
    Rectangle
    {
        id: header
        height: 100
        Layout.fillWidth: true
        color: "#00000000"
        clip: true
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
 
        Text
        {
            id: title
            text: "Welcome"
            color: "#FFFFFF"
            wrapMode: Text.WordWrap
            anchors.centerIn: parent
        }
    }
 
    Rectangle
    {
        id: body
        color: "#00000000"
        clip: true
        width: parent.width
        height: footer.y - y
        anchors {
            top: header.bottom
            topMargin: 30
            left: parent.left
            right: parent.right
        }
 
        Loader {
            id: loader
            sourceComponent: model.page
            anchors.fill: parent
        }
 
        Component {
            id: page1
            Image
            {
                id: image
                source: "../images/icon1.png"
            }
        }
 
        Component {
            id: page2
            Image
            {
                id: image
                source: "../images/icon2.png"
            }
        }
 
        Component {
            id: page3
            Image
            {
                id: image
                source: "../images/icon3.png"
            }
        }
    }
 
    Rectangle
    {
        id: footer
        Layout.fillWidth: true
        color: "#00000000"
        height: 100
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
 
        CustomCheckBox
        {
            id: checkbox
            text: "Do not show this message again."
            anchors {
                left: parent.left
                right: parent.right
            }
        }
    }
}

//WizardDelegate.qml
Item
{
    id: root
    width: ListView.view.width; height: ListView.view.height

    Rectangle
    {
        id: header
        height: 100
        Layout.fillWidth: true
        color: "#00000000"
        clip: true
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }

        Text
        {
            id: title
            text: "Welcome"
            color: "#FFFFFF"
            wrapMode: Text.WordWrap
            anchors.centerIn: parent
        }
    }

    Rectangle
    {
        id: body
        color: "#00000000"
        clip: true
        width: parent.width
        height: footer.y - y
        anchors {
            top: header.bottom
            topMargin: 30
            left: parent.left
            right: parent.right
        }

        Loader {
            id: loader
            sourceComponent: model.page
            anchors.fill: parent
        }

        Component {
            id: page1
            Image
            {
                id: image
                source: "../images/icon1.png"
            }
        }

        Component {
            id: page2
            Image
            {
                id: image
                source: "../images/icon2.png"
            }
        }

        Component {
            id: page3
            Image
            {
                id: image
                source: "../images/icon3.png"
            }
        }
    }

    Rectangle
    {
        id: footer
        Layout.fillWidth: true
        color: "#00000000"
        height: 100
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }

        CustomCheckBox
        {
            id: checkbox
            text: "Do not show this message again."
            anchors {
                left: parent.left
                right: parent.right
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode