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 

[anda_skoa]

model.page is a string, Loader.sourceComponent wants a Component.

The property you are most likely looking for is Loader.source, each "page" containing the name of a QML file containing that page

Cheers,
_

[joko]

model.page is a string, Loader.sourceComponent wants a Component.

The property you are most likely looking for is Loader.source, each "page" containing the name of a QML file containing that page

Cheers,
_

Thanks for your quick response, I just use loader.source then.

Any advise on how to change to page when it reach the last item on listview? Thanks

[anda_skoa]

Any advise on how to change to page when it reach the last item on listview? Thanks

What is your requirement?
What should happen when the last item becomes visible?

Cheers,
_

[joko]

What is your requirement?
What should happen when the last item becomes visible?

Cheers,
_

I would like to know the signal used by either Listview or Flickable to determine if the last element was flicked, if there's an available signal.
As mentioned i have a main loader that loads the Wizard.qml, I wanted to display another page once the last item was flicked/swiped to right.
I would like to change the main loader source so that the new page will display.

Thanks.

[joko]

I have found this signal onMovementStarted to trigger the changing of loader source.
However I need to know if the user swipe to right before it changes the source.
Is this a correct way to trigger the change of page or there's a better option.
Any suggestions? Thanks

ListView {
        id: wizardList
        anchors.fill: parent
        focus: true
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model:
            ListModel {
                ListElement {
                    page: "Wizard1.qml"
                }
                ListElement {
                    page: "Wizard2.qml"
                }
                ListElement {
                    page: "Wizard3.qml"
                }
            }
        delegate: WizardDelegate {}
        onMovementStarted: {
            if (wizardList.currentIndex == 2) { // i need to include in the condition to check if the swipe direction is to the right
                mainLoader.source = "Main.qml"
            }
 
        }
}

ListView {
        id: wizardList
        anchors.fill: parent
        focus: true
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model:
            ListModel {
                ListElement {
                    page: "Wizard1.qml"
                }
                ListElement {
                    page: "Wizard2.qml"
                }
                ListElement {
                    page: "Wizard3.qml"
                }
            }
        delegate: WizardDelegate {}
        onMovementStarted: {
            if (wizardList.currentIndex == 2) { // i need to include in the condition to check if the swipe direction is to the right
                mainLoader.source = "Main.qml"
            }

        }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Why don't you just add Main.qml to your model?

[joko]

Why don't you just add Main.qml to your model?

Because the Main page is completely different from the wizard pages and i don't want to go back to the wizard pages once it reaches the Main page.
Is there a way to check the swipe movement? I still trying to use the contentX, if that is possible.

Thanks

[wysota]

I completely fail to understand why you want to act on a flick. Whatever you are trying to do, I don't think the approach you have taken is a proper one. Maybe you could restate your problem in a descriptive way and we'll try to suggest an approach to solve it.

[joko]

I completely fail to understand why you want to act on a flick. Whatever you are trying to do, I don't think the approach you have taken is a proper one. Maybe you could restate your problem in a descriptive way and we'll try to suggest an approach to solve it.

Thank you for your response.

I have a main loader which loaded the wizard page with list view of wizard pages.
I used list view so that the user can flick on those pages back and forth.
At the last item, when the user flick to the right, it will exit on the list view (wizard) and will display the main page.
Once on main page, the user cannot go back to the wizard anymore.

Let me know if you have further questions on my implementation.

Thanks a lot for your time.

[wysota]

loaded the wizard page with list view of wizard pages.

I don't understand that. Wizard page with a view of wizard pages?

[joko]

I don't understand that. Wizard page with a view of wizard pages?

The Wizard qml page, where I put the Listview using the ListModel of pages.

Here is my Wizard qml page.

ListView {
        id: wizardList
        anchors.fill: parent
        focus: true
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model:
            ListModel {
                ListElement {
                    page: "Wizard1.qml"
                }
                ListElement {
                    page: "Wizard2.qml"
                }
                ListElement {
                    page: "Wizard3.qml"
                }
            }
        delegate: WizardDelegate {}
}

ListView {
        id: wizardList
        anchors.fill: parent
        focus: true
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model:
            ListModel {
                ListElement {
                    page: "Wizard1.qml"
                }
                ListElement {
                    page: "Wizard2.qml"
                }
                ListElement {
                    page: "Wizard3.qml"
                }
            }
        delegate: WizardDelegate {}
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Let's summarize -- you have a number of wizards, each composed of a number of wizard pages. You want to advance the wizard by flicking until you reach the last page of the wizard and if you flick again you should be brought to the main page where you can do some other actions (e.g. choose another wizard). Is that correct?

[joko]

Let's summarize -- you have a number of wizards, each composed of a number of wizard pages. You want to advance the wizard by flicking until you reach the last page of the wizard and if you flick again you should be brought to the main page where you can do some other actions (e.g. choose another wizard). Is that correct?

Basically, I only have 1 wizard, the list elements on List Model are just pages of the wizard.
Yes, you are correct, after reaching the last page, I should be brought to main page.

[wysota]

In that case in my opinion pages of the wizard should be handled on the same level as remaining pages of the application (i.e. without a separate list view).