MainView QML Type

MainView is the root Item that should be used for all applications. More...

• List of all members, including inherited members

Detailed Description

The simplest way to use a MainView is to include a single Page object inside the MainView:

import QtQuick 2.4
import Lomiri.Components 1.3

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

    Page {
        header: PageHeader {
            id: pageHeader
            title: "Simple page"
        }
        Button {
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: pageHeader.bottom
                topMargin: units.gu(5)
            }
            width: units.gu(15)
            text: "Push me"
            onClicked: print("Click!")
        }
    }
}

It is not required to set the anchors of the Page as it will automatically fill its parent.

Do not include multiple Pages directly inside the MainView, but use AdaptivePageLayout inside MainView to navigate between several Pages.

If the Page inside the MainView includes a Flickable, set the flickable property of the PageHeader to automatically hide and show the header when the user scrolls up or down:

import QtQuick 2.4
import Lomiri.Components 1.3

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

    Page {
        header: PageHeader {
            title: "Page with Flickable"
            flickable: myFlickable
        }

        Flickable {
            id: myFlickable
            anchors.fill: parent
            contentHeight: column.height

            Column {
                id: column
                Repeater {
                    model: 100
                    Label {
                        text: "line "+index
                    }
                }
            }
        }
    }
}

The same header behavior is automatic when using a ListView instead of a Flickable in the above example.

The examples above show how to include a single Page inside a MainView, but more advanced application structures are possible using AdaptivePageLayout.