ListView PullToRefresh скрыть строку "Pull to refresh" под строкой выше

Question

Я создаю макет QML с Column и несколько Rowвнутри. Первая строка содержит кнопку, вторая строка содержит список элементов, извлеченных из сетевой службы. Я хочу быть в состоянии сделать "тянуть, чтобы обновить" в списке, поэтому я использую PullToRefresh из ListView,

Тем не менее, это добавляет видимую строку "Потяните, чтобы обновить..." в верхней части строки вывода, на самом деле появляется в верхней части первой строки. Этот вид имеет смысл, за исключением того, что я хочу, чтобы этот текст был скрыт под первой строкой, пока он не выдвинется при извлечении списка во 2-й строке.

Вот минимальный QML для воспроизведения, который можно запустить с 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()" }
    }
}

Я не могу получить строку "Потянуть, чтобы обновить...", чтобы скрыть под первым рядом. То, что я пробовал до сих пор, что не сработало:

• задавать z значения, более высокое значение для первой строки, ниже для 2-й: нет эффекта
• заключая кнопку в первом ряду внутри Rectangle: прямоугольник не растягивается автоматически, чтобы соответствовать кнопке, а размеры строк уменьшаются до 0
• поместив белый Rectangle в первом ряду, справа от кнопки: это было самым многообещающим, но это довольно взломать
• установить фон строки: не нашел, как это было возможно

Это должно быть распространенным случаем, но я не могу найти ответы / примеры. Как скрыть строку "Извлечь для обновления..." под строкой над ней, пока она не будет вытянута в строку ниже? Или Column а также Rowне правильные компоненты, чтобы использовать, делая это?

Answer 1

Попробуйте добавить эту строку:

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

Answer 2

Одна вещь, которую вы можете попробовать, это использовать ListView"s header делегат для вашего "обновления" пользовательского интерфейса