Блог

Я создаю макет QML с a Column и несколькими Row s внутри. Первая строка содержит кнопку, вторая строка содержит список элементов, полученных из сетевой службы. Я хочу иметь возможность выполнять «вытягивать для обновления» в списке, поэтому я использую 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-й: никакого эффекта
• включение кнопки в первую строку внутри a Rectangle : прямоугольник не растягивается автоматически, чтобы соответствовать кнопке, а размеры строк уменьшаются до 0
• размещение белого Rectangle в первой строке справа от кнопки: это было самым многообещающим, но это довольно хак
• установка фона строки: не нашел, как это было возможно

Это должно быть распространенным вариантом использования, но я не могу найти никаких ответов / примеров. Как мне скрыть строку «Вытащить, чтобы обновить …» под строкой над ней, пока она не будет перенесена в строку ниже? Или, Column и Row s не являются подходящими компонентами для использования при этом?

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

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

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