Jolla and SailfishOS

2017-04-07 03:23

Sticky Page Headers

The highlighted code snipped shows how to produce a page header that does NOT scroll with the page.

For this I use two containers:

Column (line 19..34)
That contains the non-scrolling part. It contains a Label child formatted the way a PageHeader element would be by the theme.
SilicaFlickable (line 36..87)
That contains the scrollable page content.

I designed the not yet scrolled SilicaFlickable to stay initially clear of the page header by setting

anchors.top: pageHeader.bottom

by a margin of

anchors.topMarging: Theme.paddingLarge

Once you start to scroll through the list vertically, the page header will stay in place an the page content will scroll through under it.