ListView PullToRefresh 将 "Pull to refresh" 字符串隐藏在上面的一行下

Question

我正在创建一个 QML 布局，里面有一个 Column 和多个 Row。第一行包含一个按钮，第二行包含从网络服务检索的项目列表。我想能做到"pull to refresh"就行了，所以我用PullToRefresh的ListView.

但是，这会将可见字符串 "Pull to refresh..." 添加到行输出的顶部，实际上出现在第一行顶部附近。这是有道理的，除了我希望该文本隐藏在第一行下直到它在拉出第二行中的列表时滑出。

这是要重现的最小 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()" }
    }
}

我无法将 "Pull to refresh..." 字符串隐藏在第一行下方。到目前为止我尝试过但没有奏效的事情：

设置 z 值，第一行的值较高，第二行的值较低：无效
将第一行中的按钮包含在 Rectangle 中：矩形不会自动拉伸以适合按钮，并且行尺寸折叠为 0
在第一行按钮右侧放置一个白色 Rectangle：这是最有希望的，但它是一个 hack
设置一行的背景：没找到怎么可能

这一定是一个常见的用例，但我找不到任何 answers/examples。如何将 "Pull to refresh..." 字符串隐藏在它上面的行下，直到它被拉到下面的行中？或者，Column 和 Row 不是执行此操作时使用的正确组件吗？

Answer 1

您可以尝试的一件事是为您的 "refresh" UI

使用 ListView 的 header 委托

Answer 2

尝试添加这一行：

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

ListView PullToRefresh 将 "Pull to refresh" 字符串隐藏在上面的一行下

ListView PullToRefresh hide "Pull to refresh" string under a row above

listview

qml

qtquick2

pull-to-refresh

ubuntu-touch