View Single Post
Markkyboy's Avatar
Posts: 433 | Thanked: 727 times | Joined on Oct 2012 @ Costa Blanca, Espaņa
#1
Hi guys,

I have a Page with a scrollable list. I would like the header to stay in view as the list is scrolled, this is because my header has a clock on it, I would like the clock to stay in view. (yes, I know I can peek from the page, but I don't want that)

Currently, the list fills the Page, but the list really needs to start at the bottom of the header. I have tried for many hours (lol) to achieve this, but I'm not having any joy at all

Here's what I currently have so far, the header (including clock) scrolls up with the populated list;

Code:
import QtQuick 2.6
import Sailfish.Silica 1.0
import org.nemomobile.time 1.0
import harbour.nationalrail.servicemodel 1.0

Page {
    id: searchResults

    property string serviceID
    property string method
    property int rows
    property string location
    property string destination
    property string fromto
    property int timeOffset
    property int timeWindow
    property string arrivaldeparture

    SilicaListView {
        PullDownMenu {
            MenuItem {
                text: "Station Messages"
                onClicked: pageStack.push(Qt.resolvedUrl("StationMessages.qml"))
            }
            MenuItem {
                text: "Refresh"
                onClicked: timer.start()
            }
        }
        header: PageHeader {
            id: header
            title: {
                if(method == "GetDepartureBoard") header.title="Departures"
                else header.title="Arrivals"
            }
            Label {
                id: timeText
                color: Theme.primaryColor
                font.pixelSize: Theme.fontSizeLarge
                anchors.verticalCenter: header.verticalCenter
                anchors.horizontalCenter: header.horizontalCenter

                Timer {
                    interval: 500; running: true; repeat: true
                    onTriggered: timeText.text = Qt.formatTime(new Date(), "hh:mm")
                }
            }
        }
        BusyIndicator {
            anchors.centerIn: parent
            size: BusyIndicatorSize.Large
            running: !serviceModel.ready
        }
        anchors.fill: parent
        model: serviceModel
        delegate: BackgroundItem {

            Label {
                id: textTimeLabel
                font.pixelSize: Theme.fontSizeLarge
                text: '<b>%1</b>'.arg(model.departureTime || model.arrivalTime || '-')
                color: Theme.primaryColor
                anchors {
                    top: parent.top
                    left: parent.left
                    leftMargin: Theme.paddingMedium
                }
            }
            Label {
                id: amendedTimeLabel
                font.pixelSize: Theme.fontSizeSmall
                text: model.amendedDepartureTime || model.amendedArrivalTime || '-'
                color: Theme.primaryColor
                anchors {
                    top: textTimeLabel.bottom
                    topMargin: -Theme.paddingSmall
                    left: parent.left
                    leftMargin: Theme.paddingMedium
                }
            }
            onClicked: pageStack.push("JourneyDetails.qml", {"serviceID":model.serviceID})

            Rectangle {
                width: Theme.paddingSmall
                radius: Math.round(height/3)
                color: Theme.highlightColor
                anchors {
                    top: parent.top
                    bottom: parent.bottom
                    left: parent.left
                    topMargin: Theme.paddingSmall/2
                    bottomMargin: Theme.paddingSmall/2
                    leftMargin: -width/2
                }
            }
            Label {
                id: locationLabel
                text: model.stationName || '-'
                width: parent.width / 2.5
                truncationMode: TruncationMode.Elide
                anchors {
                    top: parent.top
                    horizontalCenter: parent.horizontalCenter
                }
            }
            Label {
                id: operator
                text: model.operatorCode + " - " + model.operator || '-'
                font.pixelSize: Theme.fontSizeTiny
                width: parent.width / 2.5
                truncationMode: TruncationMode.Elide
                anchors {
                    top: locationLabel.bottom
                    topMargin: Theme.paddingSmall
                    horizontalCenter: parent.horizontalCenter
                }
            }
            Label {
                id: platformLabel
                text: "Platform"
                font.pixelSize: Theme.fontSizeSmall
                anchors {
                    top: parent.top
                    right: parent.right
                    rightMargin: Theme.paddingMedium
                }
            }
            Label {
                id: platformNumber
                font.pixelSize: Theme.fontSizeLarge
                text: '<b>%1</b>'.arg(model.platform || '-')
                anchors {
                    top: platformLabel.bottom
                    topMargin: -Theme.paddingSmall
                    horizontalCenter: platformLabel.horizontalCenter
                }
            }
        }
        VerticalScrollDecorator{}

        Timer {
            id: timer
            interval: 100
            onTriggered: { networkRequest.sendXYZRequest
                (method, rows, location, destination,
                fromto, timeOffset, timeWindow)
            }
        }
        Component.onCompleted: {
            timer.start()
        }
        ServiceModel {
            id: serviceModel
            source: networkRequest
        }
    }
}
Any ideas/info gratefully received.....
__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..