Ubuntu.Components.MainView

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

• Obsolete members

Properties

• actionContext : ActionContext
• anchorToKeyboard : bool
• applicationName : string
• backgroundColor : color

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.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 Ubuntu.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.

Property Documentation

The action context of the MainView.

This QML property was introduced in Ubuntu.Components 1.3.

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

The default value is false.

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.

Color of the background.

Example:

import QtQuick 2.4
import Ubuntu.Components 1.3
MainView {
width: units.gu(40)
height: units.gu(60)
backgroundColor: UbuntuColors.blue
}