A Page defines one screen of user interface content. More...
The screen area of a mobile device is small, so an application's user interface is often composed of a set of separate screens of content or "pages". You can use pages in conjunction with the PageStack component to provide a navigation system for your application. Another navigation alternative is the Tab component that provides parallel sets of content.
See the Creating pages and navigating to them overview for a higher level discussion about pages and page stacks.
Usually you base the pages (screens of content) of your application on the Page component but you can use other components or elements if you wish. However, the benefit of the Page component is that it defines a contract for how the page and page stack and work together. A Page-component based page is notified when it becomes active or inactive and this allows you to perform various page-specific operations while the page is animated into view or animated out of view.
You can implement an application page either as a QML item or as a QML component. One way to think of the difference between an item and a component is to think of a QML item as a particular page object and a QML component as defining a class of page objects. If your page is an item, you use the page directly as you have defined it. If you want to use a component page, you have to create an instance of that component page and use that instance. Note that PageStack works transparently with either type of page. The main thing you need to consider is how long you want the page to be staying around in memory.
Here is an example page defined as an item. It is a page with a text that can be accessed externally.
// a page item Page { id: itemPage property alias message: pageText.text Text { id: pageText anchors.centerIn: parent text: "item page" font.pointSize: 25 color: "white" } }
The page described above can also be declared in its own file. This is probably the type of page you will use most often because it encapsulates the page in its own file which makes for easier maintenance. The following code snippet comes from a file called FilePage.qml.
import QtQuick 1.0 import Qt.labs.components.native 1.0 Page { id: filePage property alias message: pageText.text Text { id: pageText anchors.centerIn: parent text: "page from file" font.pointSize: 25 color: "white" } }
The page described earlier is an example of a simple page declared as a QML item. Declaring this same page as a component would look like this:
// a page component Component { id: componentPage Page { id: myComponentPage property alias message: pageText.text Text { id: pageText anchors.centerIn: parent text: "component page" font.pointSize: 25 color: "White" } } }
###TBD. See ToolBar, ToolButton and ToolBarLayout.
The page lifecycle goes from instantiation to activation to deactivation to destruction, moving any number of times between activation and deactivation. When a page is activated it means it is visible on the screen and can be considered to be "the current" page. If the page stack itself is not visible, then the top-most page in the stack is deactivated and is not visible. When the page stack becomes visible, the top-most page in the stack is activated. Likewise, if the page stack is made hidden the top-most page is deactivated. Popping the page off the top of the stack at this point does not result in further deactivation since the page is not active.
The Page::status property indicates the current state of the page. Combined with the normal Component.onComplete() and Component.onDestruction() signals you can follow the entire life cycle of the page as follows:
See also PageStack.
Defines the page's orientation. Possible values:
pageStack : PageStack |
The page stack that this page is owned by.
This is the status of the page. It can be one of the following values: