Page Based Application Navigation

Page Based Application Navigation

Qt Quick Components provides two methods for application navigation. The PageStack system provides a way of navigating a hierarchy of pages. It is a stack that you can push pages of content onto and pop pages off the stack. The page at the top of the stack is what the user sees. The other method is to create pages in tabs. With the tabs system, the pages are arranged in a tab and the user can select the pages by clicking on the tabs.

Qt Quick组件提供了两种应用程序导航方法。PageStack系统提供了层次页面的导航。这是一个堆栈,您可以把页面压入和压出堆栈。堆栈最顶层的页面就是用户看到的页面。另一个方法是在tab里创建页面。用tab系统,页面被安排在一个tab里,用户可以点击tab来选择页面。

Page Component

A Page component serves as a container for other QML content. A page may contain additional components such as a TextEdit or Button components.

一个Page组件可以用作QML其他内容的容器。一个页面可以包含额外的组件,如一个TextEdit或Button组件。

A Page may be created by defining the page inline or by encapsulating it in a Component element. Inline definitions of pages are ideal for small pages, however, all of the pages will remain in memory during creation. To exert control over the creation and destruction of a page, encapsulate them in a Component element.

一个Page可以被创建在嵌入的定义页面的或封装在一个组件元素里。页面嵌入定义对小页面比较理想,然而,所有的页面在创建期间将留在内存中。为了控制页面的创造和析构,封装它们在一个组件元素。

Alternatively, a page can be defined in its own .qml file. This makes it easier to locate the source for each page and maintain the pages. It also makes it easier to share page implementations between applications.

另外,页面可以被定义在它自己的.qml文件里。这更容易地定位每一页的来源和维护页面。它也更容易实现应用程序之间分享页面。

Attaching a Tool Bar to a Page

You can integrate the PageStack with the ToolBar. This allows the pages to use the same instance of the ToolBar and run synchronized animations with the push and pop operations. This integration happens at the root level of your application, usually in the Window.

你可以把ToolBar集成到PageStack。这使得页面能使用相同的ToolBar实例和同步运行将压栈和出栈的操作动画。这种整合一般发生在应用程序的根层级,通常在Window里。

     PageStack {
         id: pageStack
         toolBar: commonToolBar
         anchors { left: parent.left; right: parent.right; top: parent.top; bottom: toolBar.top }
     }

     ToolBar {
         id: commonToolBar
         anchors.bottom: parent.bottom
     }

The snippet above creates a PageStack and a ToolBar. The toolBar property of the PageStack binds to the created toolbar. This property binding allows the PageStack to update the application level ToolBar instance automatically when it changes the active Page.

上面的代码段里创造了一个PageStack和ToolBar。PageStack的toolbar属性绑定了已创造的工具栏。这属性绑定允许PageStack自动更新应用程序级的ToolBar实例当它改变活动的Page。

Because the ToolBar instance is already created, the only thing left for the Page is to define the content - this is done by populating the tools property of the Page.

因为ToolBar实例已经被创造了,页面要做的事情就是定义它的内容——这可以被发布到页面的tools属性里。

In the snippet below, a ToolBarLayout is used to position the ToolButton components.

在下面片段,ToolBarLayout是用来安置ToolButton组件。

     Page {
         id: firstPage
         tools: ToolBarLayout {
             id: pageSpecificTools
             ToolButton { iconSource: "toolbar-back"; onClicked: Qt.quit() }
             ToolButton { text: "next page"; onClicked: pageStack.push(secondPage) }
         }
     }

The tools content is re-parented to the ToolBar instance when the page is shown.

当页面显示时，tools内容会重新指定父项为ToolBar实例。

Hierarchical Navigation with a PageStack

Pushing a page to the stack will make the page visible to the user. The stack can store many pages and to navigate back, the stack can pop pages. The stack can replace the top page with a different page (or pages) rather than popping and pushing pages. In all these cases, the page stack performs appropriate transition animations to help the user understand a change is occurring.

压入一个页面进栈将使该页面显示给用户。堆栈能储存很多页面和后退,堆栈可以推出页面。堆栈能用不同页面（或多个页面）取代前页面，而不是用出栈进栈的方式。在所有这些情况下,页面堆栈进行适当的过渡动画能帮助用户了解正在发生的变化。

Pushing Pages to the Stack

There are basically three ways you can push a page onto the stack:

基本上有三种方法可以将一个页面压入堆栈:

1. File: Pass a file name (URL) for a page defined in a QML file: For example: pageStack.push(Qt.resolvedUrl("FilePage.qml")). The stack then simply loads the page from the file.

通过文件名(URL)页面定义在一个QML文件:例如:pageStack.push(Qt.resolvedUrl(“FilePage.qml”)。 然后堆栈只需从这文件载入这页面。

1. Item reference: Pass a reference to the item that defines the page. For example, pageStack.push(myPage), where myPage is an instantiated object.

通过引用定义了页面的item。例如,pageStack.push(myPage),这里myPage是一个实例化对象。

1. Component reference: Pass a reference to a component that defines a page, such as a declaration encapsulated in a Component element. The stack then creates a new instance of that component.

通过引用一个定义了页面的组件,如封装在一个组件元素的声明。那么堆栈创建这个组件的新的实例。

Encapsulating page definitions in a Component element means you can defer their creation and memory does not need to be allocated until the page is needed. Further, the page stack instantiates the page and destroys the instance when the page is popped from the stack. This means you don't have to worry about memory management since it is all handled by the page stack. As well, pages as components allow multiple instances of a particular page type to be at the stack. This means you can define one component with configurable variations rather than defining a separate item for each variation.

封装页面的定义在一个组件元素中意味着你可以延迟他们的创建和内存不需要被分配给它们直到这页面被需要。另外,页面堆栈实例化这页面和这页面被弹出堆栈时销毁这实例。这意味着你不必担心内存管理因为它是完全由页面堆栈处理。同时,页面作为组件允许某一特定的页面类型有多个实例处于堆栈中。这意味着你可以定义一个可配置变量的组件,而不是为每个变量分别定义一个单独的item。

Page Navigation with ToolBars

The ToolBar instance can be used for page navigation.

ToolBar能被用于页面导航

     Page {
         id: firstPage
         tools: ToolBarLayout {
             id: pageSpecificTools
             ToolButton { iconSource: "toolbar-back"; onClicked: Qt.quit() }
             ToolButton { text: "next page"; onClicked: pageStack.push(secondPage) }
         }
     }
     Page {
         id: secondPage
         tools: ToolBarLayout {
             ToolButton { iconSource: "toolbar-back"; onClicked: pageStack.pop() }
         }
     }

The ToolButton can be bound to the PageStack commands such as push and pop. This way the page navigation can be made more intuitive for the end user.

ToolButton可以绑定到PageStack命令如压入和弹出。这种页面导航方式可以使最终用户感觉更直观。

Blocking User Actions During Page Transitions

The PageStack's busy property evaluates to true when the stack is changing pages. The busy property is useful for notifying the application when the stack changes to prevent unintentional events or user input.

当堆栈正在切换页面时，PageStack的busy属性值为true。busy属性用于通知应用程序当堆栈的变化时来防止无意的事件或用户的输入。

     MouseArea {
         anchors.fill: parent
         enabled: pageStack.busy
     }

Binding this property can disable mouse interaction within a MouseArea.

绑定这个属性能禁用MouseArea的鼠标交互

Page Navigation with Tabs

Alternatively, the Tab component can contain Page items. The parallel arrangement of pages are managed by the tab and clicking on a tab switches the visible pages.

另外,Tab组件可以包含Page项。通过tab，管理平行排列的页面,点击一个tab来显示一个页面。

The buttons are implemented with the TabButton component. You can layout these buttons as you like. In the ToolBar, the ButtonRow is used for laying. This also changes the buttons graphical presentation to match the ToolBar's look and feel.

这些按钮由TabButton组件来实现。你可以按你喜欢的来布置这些按钮。在ToolBar中,ButtonRow是用来布局的。这也改变按钮的图形展现来匹配ToolBar的外观和感觉。

 ToolBarLayout {
     ToolButton {...} // back button
     ButtonRow {
         TabButton {...}
         TabButton {...}
 }

You can use TabBarLayout, and TabBar in Symbian, to layout buttons for a stand-alone tool bar. In this case, the you must position the TabBarLayout.

在symbian中，你可以用TabBarLayout和TabBar，布置了这些按钮在一个单独的工具栏。在这种情况下,你必须指定TabBarLayout的位置。

 TabBarLayout {
     anchors.top: parent.top
      parent.width
     TabButton {...}
     TabButton {...}
 }

The tab content is managed by the TabGroup component whose child items are content items.

tab的内容有TabGroup组件来管理，它的子项就是内容项。

 TabGroup {
     anchors {...} // user needs to layout the tab group
     Page { id: tab1Content }
     Page { id: tab2Content }
 }

The button and the content items are linked together with the TabButton's tab property.

用TabButton的tab属性把按钮和内容项连接起来。

 TabButton { id: tab1Button; tab: tab1Content }

Once the linking is established, the TabButton and TabGroup components manage the tab content switching and also highlight the corresponding tab button.

一旦连接建立,TabButton和TabGroup组件管理tab内容的交换，也突显相应的tab按钮。

Dynamic Tab Handling

In most cases, the tab count is static. Therefore, you can statically allocate child items of TabGroup and the layouting component as described above. In some cases, you have to add or remove tabs dynamically depending on the application state.

在大多数情况下,标签数是静态的。因此,您可以静态分配TabGroup的子项和按上述布置组件。在某些情况下,你必须按照应用程序的状态来添加或删除标签。

You can append a tab by creating a new TabButton as a child of the layout and similarly creating a new content item as the TabGroup's child. In addition, you need to set the TabButton's tab property to point to the new content item.

你可以通过创造一个新的TabButton作为一个布局的孩子来添加一个标签,类似创建一种新的内容项作为TabGroup的孩子。另外,你需要设定TabButton的tab属性指向新的内容项。

If you need to re-arrange the tab buttons, you need to clear the layout and append the buttons again in the correct order. The item order in the TabGroup does not affect the shown tab order.

如果你需要重新安排这些标签按钮,你需要清空布局和再次按正确的顺序添加按钮。TabGroup里的项目顺序不影响标签的显示顺序。

You can remove a tab by deleting TabButton and the content item instances with destroy().

删除TabButton和析构内容项实例可以移除一个tab。

Improving Performance

Use Qt.createComponent() to load the pages only when you need a page, use Component.createObject() to parse the page and create an instance of it. Note that normal property bindings cannot be used because you are using a component, rather than a specific QML object. To get around this, you need to specify a map of properties and values when the component is instantiated. See Dynamic Object Management in QML for more details.

使用Qt.createComponent()加载页面只有当你需要一个页面,使用Component.createObject()来解析这页面然后产生一个实例。 注意,正常的属性绑定不能被使用,因为你正在使用一个组件,而不是一个具体的QML对象。为了做到这一点,你需要指定一个属性和值的映射关系是当组件被实例化。查看Dynamic Object Management 获取更多细节。