MainView
MainView is the root Item that should be used for all applications. It automatically adds a header and toolbar for its contents. More...
Properties
- applicationName : string (preliminary)
- tools : ToolbarActions (deprecated)
Detailed Description
The simplest way to use a MainView is to include a Page object inside the MainView:
import QtQuick 2.0 import Ubuntu.Components 0.1 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. 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.0 import Ubuntu.Components 0.1 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.
A toolbar can be added to the application by setting the tools property of the Page:
import QtQuick 2.0 import Ubuntu.Components 0.1 MainView { width: units.gu(48) height: units.gu(60) Page { title: "Page title" Rectangle { id: rectangle anchors.centerIn: parent width: units.gu(20) height: units.gu(20) color: "blue" } tools: ToolbarActions { Action { text: "red" onTriggered: rectangle.color = "red" } Action { text: "green" onTriggered: rectangle.color = "green" } } } }
The toolbar is hidden by default, but will be made visible when the user performs a bottom-edge-swipe gesture, and hidden when the user swipes it out, or when the active Page inside the MainView is changed. The examples above show how to include a single Page inside a MainView, but more advanced application structures are possible using PageStack and Tabs. See ToolbarActions for details on how to to control the behavior and contents of the toolbar.
Property Documentation
This documentation is under development and is subject to change.
The property holds the application's name, which must be the same as the desktop file's name.
tools : ToolbarActions |
This documentation is deprecated.
The tools of the main view's toolbar. This property is deprecated. Pages will now automatically update the toolbar when activated.