CODEWITHSUNDEEP
qtlistviewmodelstateqml
teukkam
teukkam

Reputation: 4317

How to make state-based model change in QML

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.

Upvotes: 1

Views: 3498

Answers (2)

teukkam
teukkam

Reputation: 4317

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.

Upvotes: 0

MartinJ
MartinJ

Reputation: 1701

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

Upvotes: 2

Related Questions