Comment faire un changement de modèle basé sur l'état dans QML

Question

J'essaie de créer une application de dictionnaire QML. Il récupère la définition de mot via une API XML RESTful et les affiche dans un ListView. Je l'ai travaillé dans ce mode rudimentaire. Mais maintenant j'essaye d'implémenter deux états pour le ListView: la vue standard avec les définitions et une liste de suggestions de type «avez-vous voulu dire» quand la recherche a échoué.

Mon code actuel pour le ListView est comme ceci:

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 
    } 

qui donne cette erreur:

Unable to assign QObject* to QDeclarativeComponent* 

pour la déclaration PropertyChanges. Il y a aussi une boucle de liaison, mais ce n'est pas vraiment un problème que je n'ai pas pu résoudre. Mon problème est de savoir comment définir les états. Je ne peux pas instancier le modèle et le déléguer dans la déclaration d'état, car l'interpréteur se plaindra de la création d'un objet spécifique à l'état.

Answer 1

SuggestionDelegate est en cours d'instanciation. La propriété delegate requiert un composant qu'il instanciera automatiquement pour chaque élément qu'il affiche. Donc, pour fournir un composant plutôt que d'une instance dont vous avez besoin pour envelopper le SuggestionDelegate dans un composant et utiliser l'ID de composant dans les PropertyChanges:

Component { 
    id: suggestionDelegate 
    SuggestionDelegate { } 
} 

Answer 2

Bien que la solution de Martin a résolu le problème que je faisais, je suis venu avec un meilleur conception pour l'interface utilisateur. Comme les vues de définitions et de suggestions sont mutuellement exclusives, j'ai implémenté chacune comme un élément qui a la même géométrie et qui est affiché ou caché en fonction de l'état actuel. Cela permet également de belles animations de transition.