ListView PullToRefresh masquer Chaîne «Pull to refresh» sous une ligne au-dessus

Question

Je crée une mise en page QML avec Column et plusieurs s à l'intérieur. La première ligne contient un bouton, la deuxième ligne contient une liste d'éléments extraits d'un service réseau. Je veux être en mesure de faire "pull to refresh" sur la liste, donc j'utilise PullToRefresh du ListView. Cependant, ceci ajoute la chaîne visible "Pull to refresh ..." au début de la sortie de la ligne, apparaissant en fait près du haut de la première ligne. Ce genre de sens, sauf que je veux que ce texte soit caché sous la première rangée jusqu'à ce qu'il glisse lorsque la liste de la 2e rangée est tirée.

Voici le QML minimum de reproduire, ce qui peut être exécuté avec qmlscene:

import QtQuick 2.4 
import QtQuick.XmlListModel 2.0 
import Ubuntu.Components 1.3 

MainView { 

    id: root 
    width: units.gu(50) 
    height: units.gu(75) 

    Column { 
     Row { 
      Button { 
       id: selector 
       text: "Select" 
      } 
     } 
     Row { 
      ListView { 
       id: listOfThings 
       height: 500 
       width: 400 
       model: things 
       delegate: Text { 
        text: title + " (" + pubDate + ")" 
       } 
       PullToRefresh { 
        refreshing: things.status === XmlListModel.Loading 
        onRefresh: things.reload() 
       } 
      } 
     } 
    } 

    XmlListModel { 
     id: things 
     source: "https://news.yahoo.com/rss/" 
     query: "/rss/channel/item" 
     XmlRole { name: "title"; query: "title/string()" } 
     XmlRole { name: "pubDate"; query: "pubDate/string()" } 
    } 
} 

Je ne peux pas le « Tirer pour rafraîchir ... » chaîne à se cacher sous la première ligne. Ce que j'ai essayé jusqu'à présent cela ne fonctionne pas:

• définir z valeurs, valeur plus élevée pour la première rangée, plus bas pour le 2ème: aucun effet
• enfermant le bouton dans la première rangée dans un Rectangle: le rectangle ne s'étire pas automatiquement pour s'adapter au bouton et que les dimensions de la ligne s'affaissent à 0
• en plaçant un blanc Rectangle dans la première rangée, à droite du bouton: cela a été le plus prometteur, mais c'est plutôt un hack
• définir un arrière-plan de ligne: n'a pas trouvé comment cela était possible

Ceci doit être un cas d'utilisation courant, mais je ne trouve aucune réponse/aucun exemple. Comment puis-je cacher la chaîne "Pull to refresh ..." sous la ligne au-dessus, jusqu'à ce qu'elle soit tirée dans la rangée ci-dessous? Ou, sont Column et s pas les bons composants à utiliser lors de cette opération?

Answer 1

Essayez d'ajouter cette ligne:

 ListView { 
      id: listOfThings 
      clip: true // <- this line! 
      height: 500 
      width: 400 

Answer 2

Une chose que vous pouvez essayer est d'utiliser header délégué pour votre interface utilisateur « refresh » du ListView