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.1 |
Inherits: |
Properties
- actionManager : ActionManager
- actions : list<Action>
- anchorToKeyboard : bool (preliminary)
- applicationName : string (preliminary)
- automaticOrientation : bool (preliminary)
- backgroundColor : color
- footerColor : color
- headerColor : color
- useDeprecatedToolbar : bool
Detailed Description
The simplest way to use a MainView is to include a single Page object inside the MainView:
import QtQuick 2.0 import Ubuntu.Components 1.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.
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.0 import Ubuntu.Components 1.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 1.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: UbuntuColors.coolGrey } tools: ToolbarItems { ToolbarButton { action: Action { text: "orange" onTriggered: rectangle.color = UbuntuColors.orange } } ToolbarButton { action: Action { text: "purple" onTriggered: rectangle.color = UbuntuColors.lightAubergine } } } } }
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 ToolbarItems for details on how to to control the behavior and contents of the toolbar.
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.
anchorToKeyboard : bool |
This QML property is under development and is subject to change.
The property holds if the application should automatically resize the contents when the input method appears
The default value is false.
applicationName : string |
This QML property 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. The name also sets the name of the QCoreApplication and defaults for data and cache folders that work on the desktop and under confinement. C++ code that writes files may use QStandardPaths::writableLocation with QStandardPaths::DataLocation or QStandardPaths::CacheLocation.
automaticOrientation : bool |
This QML property is under development and is subject to change.
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.0 import Ubuntu.Components 1.1 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.
useDeprecatedToolbar : bool |
Setting this option will enable the old toolbar, and disable the new features that are being added to the new header. Unsetting it removes the toolbar and enables developers to have a sneak peek at the new features that are coming to the header, even before all the required functionality is implemented. This property will be deprecated after the new header implementation is done and all apps transitioned to using it. Default value: true.