Markkyboy |
2017-08-27 15:12 |
Static Page Header with SilicaListView
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.....
|