How to make state-based model change in QML

Question

Hi, I'm trying to make a QML-based dictionary application. It fetches the word definition via an XML RESTful API and displays them in a ListView. I have it working in this rudimentary mode. But now I'm trying to implement two states for the ListView: standard view with the definitions and a "did you mean" type suggestions list for when the search failed.

My current code for the ListView is like this:

ListView
{
    SuggestionModel{id:suggestionModel; currentWord : "test"}
    SuggestionDelegate{id:suggestionDelegate}
    model : XmlModel{id: standardModel; currentWord : "test"}
    delegate : ListDelegate{id:standardDelegate}
    clip : true
    anchors.top : hbox.bottom
    y : hbox.height + 3
    width : parent.width
    height : parent.height - hbox.height
        id : list
        states :
                State { name: "suggestion"; when: list.model == suggestionModel ||
                        list.model.status ==  XmlListModel.Ready && list.count == 0
                PropertyChanges {
                    target: list
                    model : suggestionModel
                    delegate : suggestionDelegate
                }
            }

        focus : true
        keyNavigationWraps : true
    }

which gives this error:

Unable to assign QObject* to QDeclarativeComponent*

for the PropertyChanges declaration. There is also a binding loop but that's not really an issue I couldn't fix. My problem is how do I define the states. I can't instantiate the model and delegate inside the State declaration either as the interpreter will complain about creating a state-specific object.

Answer 1

SuggestionDelegate is being instantiated. The delegate property requires a Component which it will instantiate itself for each item it displays. So to provide a Component rather than an instance you need to wrap the SuggestionDelegate in a Component and use the Component id in the PropertyChanges:

Component {
    id: suggestionDelegate
    SuggestionDelegate { }
}

Answer 2

Though Martin's solution fixed the problem I was having, I came up with a better design for the UI. Since the definitions and suggestions view are mutually exclusive, I implemented each as its own item which have the same geometry and are displayed or hidden according to the current state. This also allows for nice transition animations.