ListView PullToRefresh hide Потяните, чтобы обновить строку под строкой выше

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

Однако это добавляет видимую строку «Потяните, чтобы обновить...» в верхней части вывода строки, фактически появляющуюся в верхней части первой строки. В этом есть смысл, за исключением того, что я хочу, чтобы этот текст был скрыт под первой строкой до тех пор, пока он не выскользнет при вытягивании списка во второй строке.

Вот минимальный 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 не подходят для использования при этом?


listview qml qtquick2 pull-to-refresh ubuntu-touch
person Unix One    schedule 03.10.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

        ListView {
            id: listOfThings
            clip: true   // <- this line! 
            height: 500
            width: 400
person mardy    schedule 05.10.2016
comment
Отлично, это именно то, что я искал - спасибо! Я бы хотел, чтобы в документах был способ указать на часто используемые/необходимые свойства, подобные этому. - person Unix One; 05.10.2016

arrow_upward
1
arrow_downward

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

person Kevin Krammer    schedule 03.10.2016
comment
Привет, Кевин, не могли бы вы уточнить, как я буду использовать делегата header для реализации поведения по запросу и обновлению? Я также не могу найти никаких примеров для этого. Не могли бы вы поделиться кодом? - person Unix One; 03.10.2016
comment
Делегат header — это элемент, который является частью прокручиваемого содержимого представления списка, но расположен перед первым фактическим элементом содержимого. То же самое касается footer в конце. Любой из них появится, как только представление будет прокручено достаточно далеко до соответствующего конца. Я предлагаю попробовать использовать элемент header, например. независимо от того, виден он или нет, где он находится относительно начала представления, чтобы вызвать обновление - person Kevin Krammer; 08.10.2016
comment
Привет, Кевин, спасибо за разъяснение. Насколько я понимаю, это будет означать повторную реализацию того, что уже делает PullToRefresh {...}. Но я буду помнить об этом на случай, если захочу настроить внешний вид верхнего и нижнего колонтитула. - person Unix One; 11.10.2016