4

我正在创建一个包含 aColumn和多个Rows 的 QML 布局。第一行包含一个按钮，第二行包含从网络服务检索到的项目列表。我希望能够对列表进行“拉动刷新”，所以我使用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()" }
    }
}

我无法让“拉动刷新...”字符串隐藏在第一行下方。到目前为止我尝试过的事情没有奏效：

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

这一定是一个常见的用例，但我找不到任何答案/示例。如何在其上方的行下方隐藏“拉动刷新...”字符串，直到它被拉入下方的行？或者，在执行此操作时，Column和Rows 是否不适合使用？

4

2 回答 2

3

尝试添加这一行：

        ListView {
            id: listOfThings
            clip: true   // <- this line! 
            height: 500
            width: 400
于 2016-10-05T14:50:38.167 回答
1

您可以尝试的一件事是将ListView'sheader代表用于“刷新”用户界面

于 2016-10-03T11:07:33.233 回答