Active Topics
-
[Announce] coderus unrestricted system-ui (297)
to MeeGo / Harmattan by nieldk - 5 days, 20 hrs ago -
Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (8)
to SailfishOS by edp17 - 6 days, 12 hrs ago - more...
|
2017-08-27
, 15:30
|
|
Posts: 578 |
Thanked: 994 times |
Joined on Dec 2012
|
#3
|
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: | ||
 |
|
2017-08-27
, 15:32
|
|
Posts: 433 |
Thanked: 727 times |
Joined on Oct 2012
@ Costa Blanca, Espaņa
|
#4
|
Originally Posted by coderus
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?
move your PageHeader out of SilicaListView?
thanks,
__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..
|
|
2017-08-27
, 15:47
|
|
Posts: 433 |
Thanked: 727 times |
Joined on Oct 2012
@ Costa Blanca, Espaņa
|
#5
|
Originally Posted by elros34
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!
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 } } } } } }
__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..
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;
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 } } }..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..