Static Page Header with SilicaListView - maemo.org

Markkyboy | # 1 | 2017-08-27, 15:12 | Report

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.....

coderus | # 2 | 2017-08-27, 15:16 | Report

move your PageHeader out of SilicaListView?

The Following User Says Thank You to coderus For This Useful Post:
Markkyboy

elros34 | # 3 | 2017-08-27, 15:30 | Report

I use something like that in my apps:

Code:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent
        contentHeight: column.height

        PullDownMenu {
        }
        Column {
            id: column
            width: page.width

            PageHeader {
                id: pageHeader
                title: qsTr("UI Template")
            }
            SilicaListView {
                id: listView
                width: parent.width
                height: page.height - pageHeader.height

                clip: true

                model: 40

                delegate: BackgroundItem {
                    Label {
                        text: index
                        font.pixelSize: Theme.fontSizeMedium
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
            }
        }
    }
}

The Following User Says Thank You to elros34 For This Useful Post:
Markkyboy

Markkyboy | # 4 | 2017-08-27, 15:32 | Report

Originally Posted by coderus View Post

move your PageHeader out of SilicaListView?

Almost coderus, but now, I have the clock and Departures label mixed in with the list, as the list fills the page. How do I make the list appear lower, so it's 'below' Departures label?

thanks,

Markkyboy | # 5 | 2017-08-27, 15:47 | Report

Originally Posted by elros34 View Post

I use something like that in my apps:

Code:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent
        contentHeight: column.height

        PullDownMenu {
        }
        Column {
            id: column
            width: page.width

            PageHeader {
                id: pageHeader
                title: qsTr("UI Template")
            }
            SilicaListView {
                id: listView
                width: parent.width
                height: page.height - pageHeader.height

                clip: true

                model: 40

                delegate: BackgroundItem {
                    Label {
                        text: index
                        font.pixelSize: Theme.fontSizeMedium
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
            }
        }
    }
}

Okay, I pasted that into my page and yes, fixed header with list view, exactly what I'm after, now to try an adapt the existing to the new, thanks elros34, the foggy veil has lifted a little!