MainView

MainView is the root Item that should be used for all applications. It automatically adds a header and toolbar for its contents and can rotate its content based on the device orientation. More...

Import Statement: import Ubuntu.Components 1.2
  • Obsolete members

Properties

Detailed Description

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

import QtQuick 2.4
import Ubuntu.Components 1.2
MainView {
    width: units.gu(48)
    height: units.gu(60)
    Page {
        title: "Simple page"
        Button {
            anchors.centerIn: parent
            text: "Push me"
            width: units.gu(15)
            onClicked: print("Click!")
        }
    }
}

It is not required to set the anchors of the Page as it will automatically fill its parent. The MainView has a header that automatically shows the title of the Page.

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

For the MainView to automatically rotate its content following the orientation of the device, set the automaticOrientation property to true.

If the Page inside the MainView includes a Flickable with enough contents for scrolling, the header will automatically hide and show when the user scrolls up or down:

import QtQuick 2.4
import Ubuntu.Components 1.2
MainView {
    width: units.gu(48)
    height: units.gu(60)
    Page {
        title: "Page with Flickable"
        Flickable {
            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 PageStack and Tabs.

Property Documentation

read-onlyactionManager : ActionManager

The ActionManager that supervises the global and local ActionContexts. The actions property should be used preferably since it covers most use cases. The ActionManager is accessible to have a more refined control over the actions, e.g. if one wants to add/remove actions dynamically, create specific action contexts, etc.


actions : list<Action>

A global list of actions that will be available to the system (including HUD) as long as the application is running. For actions that are not always available to the system, but only when a certain Page is active, see the actions property of Page.


active : bool

MainView is active by default.


anchorToKeyboard : bool

The property holds if the application should automatically resize the contents when the input method appears

The default value is false.


applicationName : string

The property holds the application's name, which must be the same as the desktop file's name. The name also sets the name of the QCoreApplication and defaults for data and cache folders that work on the desktop and under confinement, as well as the default gettext domain. C++ code that writes files may use QStandardPaths::writableLocation with QStandardPaths::DataLocation or QStandardPaths::CacheLocation.


automaticOrientation : bool

Sets whether the application will be automatically rotating when the device is.

The default value is false.


backgroundColor : color

Color of the background.

The background is usually a single color. However if headerColor or footerColor are set then a gradient of colors will be drawn.

For example, in order for the MainView to draw a color gradient beneath the content:

import QtQuick 2.4
import Ubuntu.Components 1.2
MainView {
    width: units.gu(40)
    height: units.gu(60)
    headerColor: "#343C60"
    backgroundColor: "#6A69A2"
    footerColor: "#8896D5"
}

See also footerColor and headerColor.


footerColor : color

Color of the footer's background.

See also backgroundColor and headerColor.


headerColor : color

Color of the header's background.

See also backgroundColor and footerColor.