Header QML Type

The heights of the Page headers in an AdaptivePageLayout are synchronized by the AdaptivePageLayout so that they all get the height of the largest implicitHeight of the visible Page headers to give a uniform look to the headers. To opt-out of this height synchronization, set automaticHeight to false. This will prevent the AdaptivePageLayout from taking the Header's implicitHeight into account for computing the maximum header height, and it will also not update the height of the header that has automaticHeight set to false to match the other header heights. Default value: true.

Exposes and hides the header by animating its y-value between -height and 0 to move it in or out of its parent Item. The value of exposed can be set directly, or it will be automatically updated when the user exposes or hides the Header by scrolling the Header's flickable.

When flickable is set, scrolling vertically in the flickable, or setting the Flickable's y-value will move the header y-position by the same amount as the flickable content movement. When scrolling the flickable, upon release, the header will animate to fully exposed or fully hidden state, depending on whether it was more or less than half exposed when the user stopped moving the flickable.

When flickable is null, the header can be exposed or hidden by setting the exposed property. Note that exposed is not automatically updated when the value of flickable changes, so if the header must be exposed when the flickable changes (or is set to null), this must be done explicitly. Example:

import QtQuick 2.4
import Lomiri.Components 1.3

MainView {
    width: units.gu(60)
    height: units.gu(80)

    AdaptivePageLayout {
        id: layout
        anchors.fill: parent
        primaryPage: Page {
            id: page
            Flickable {
                id: contentFlick
                anchors.fill: parent
                topMargin: page.header.flickable ? 0 : page.header.height
                contentHeight: units.gu(200)
                // Scrolling here can hide the header.
            }
            header: PageHeader {
                title: i18n.tr("Navigation")
                flickable: layout.columns === 1 ? contentFlick : null
                // Show header when it gets locked in a two-column layout:
                onFlickableChanged: exposed = true
            }
        }
    }
}

The topMargin of the flickable will automatically be updated by adding the height of the header to the current topMargin. When changing the flickable, the topMargin of the previous flickable is restored by subtracting the header height from it. Making the header invisible has the same effect on the topMargin as unsetting the flickable.

It is permitted to use a ListView as the value of flickable, but this works well only if the ListView.header property is not set. Alternatively, a Header component may be used for ListView.header, but in that case the flickable of the Header must be null.

Indicates whether the header is currently moving, either because contentY of the flickable changes (due to user interaction or by setting it directly), or because the header is animating in or out because the value of exposed was updated.