Ubuntu.Components 1.3上的PageHeader教程

在Ubuntu.Components 1.3上推出了一个新的PageHeader．它是用来代替以前版本Ubuntu.Component 1.1/1.2中的Page.title及Page.head．在编程的时候，如果PageHeader存在的话，那么Page.title及Page.head将不在起任何的作用．本文章的英文出处为＂PageHeader
tutorial＂．英文好的开发者可以直接读英文的文章．在Ubuntu.Components 1.3中，每个页面可以有自己单独的Page.header，而且每个header都可以是任何一个Item．另外值得指出的是Page.header的父亲是每个页面的Page．

１）新的Page header属性

为了说明问题，我们先来做一个简单的应用：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "pageheader1.liu-xiao-guo"

width: units.gu(60)
height: units.gu(85)

Page {
id: page
header: Image {
height: units.gu(8)
width: parent.width
source: "images/image1.jpg"
}

Image {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
top: page.header.bottom
}
source: "images/image2.jpg"
}
}
}

在上面的代码中，我们可以看出来header的父亲是Page，并且它的高度是我们可以自己定义的．事实上它可以是任何一个我们可以定义的Item．我们可以定义我们任何喜欢的Component上去，而不是先前我们只能定义一个Page.title．运行我们的代码：



我们的代码在：https://github.com/liu-xiao-guo/pageheader1

２）使用PageHeader作为一个page的header

在上面的练习中我们可以随意用一个Item来当做我们的header，但是对于有些应用，我们还是希望有像我们以前Page.title那样的特性来使得我们的每个页面有自己的title等．我们可以使用PageHeader完成我们所需要的功能．同时PageHeader也可以让我们在header上放上我们所需要的action．我们还是来通过一个例程来展示它的功能：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "pageheader2.liu-xiao-guo"

width: units.gu(60)
height: units.gu(85)

Page {
header: PageHeader {
title: "Ubuntu header"
leadingActionBar.actions: [
Action {
iconName: "contact"
text: "Navigation 1"
},
Action {
iconName: "calendar"
text: "Navigation 2"
},
Action {
iconName: "contact"
text: "Navigation 1"
},
Action {
iconName: "calendar"
text: "Navigation 2"
}
]
trailingActionBar.actions: [
Action {
iconName: "settings"
text: "First"
},
Action {
iconName: "info"
text: "Second"
},
Action {
iconName: "search"
text: "Third"
},
Action {
iconName: "settings"
text: "First"
},
Action {
iconName: "info"
text: "Second"
},
Action {
iconName: "search"
text: "Third"
}
]
}
}
}

运行我们的代码：







从上面我们可以看出来，我们可以在header上面加上leadingActionBar（如果被定义，在PageStack及AdaptivePageLayout被使用时，＂＜＂按钮将被自动影藏）及trailingActionBar（如果数量多，就会出现＂三＂字行的符号供打开）．

项目代码：https://github.com/liu-xiao-guo/pageheader2

３）自动显示及影藏header

上面的两个例程都是显示了如何静态地显示一个Page.header，但是在我们的实际应用中，我们有时希望能够动态地影藏或显示我们的header，比如在一个ListView被向上滚动时，我们希望header被自动影藏以显示更多的区间给我们的应用．

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "pageheader3.liu-xiao-guo"

width: units.gu(60)
height: units.gu(85)

Page {
header: PageHeader {
title: "Ubuntu header"
flickable: listView
trailingActionBar.actions: [
Action {
iconName: "info"
text: "Information"
}
]
}
ListView {
id: listView
anchors.fill: parent
model: 20
delegate: ListItem {
Label {
anchors.centerIn: parent
text: "Item " + index
}
}
}
}

}

在上面的代码中，我们把header的flickable属性定义为listView．这样当我们向上滑动我们的列表时，header就会被自动影藏．





项目的源码：https://github.com/liu-xiao-guo/pageheader3

４）扩展header

我们可以使用header的extension属性来扩展我们的header．这个extension的属性可以是任何一个QML
Item．它存在于header的正下方．我们可以利用header中的contents属性来替换掉默认的title属性．我们还是先来看一个例程：

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "pageheader4.liu-xiao-guo"

width: units.gu(60)
height: units.gu(85)

Page {
id: page
header: standardHeader
Label {
anchors {
horizontalCenter: parent.horizontalCenter
top: page.header.bottom
topMargin: units.gu(5)
}
text: "Use the icons in the header."
visible: standardHeader.visible
}
PageHeader {
id: standardHeader
visible: page.header === standardHeader
title: "Default title"
trailingActionBar.actions: [
Action {
iconName: "search"
text: "Search"
onTriggered: page.header = searchHeader
},
Action {
iconName: "edit"
text: "Edit"
onTriggered: page.header = editHeader
}
]
}
PageHeader {
id: searchHeader
visible: page.header === searchHeader
leadingActionBar.actions: [
Action {
iconName: "back"
text: "Back"
onTriggered: page.header = standardHeader
}
]
contents: TextField {
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
}
placeholderText: "Search..."
}
}
PageHeader {
id: editHeader
visible: page.header === editHeader
property Component delegate: Component {
AbstractButton {
id: button
action: modelData
width: label.width + units.gu(4)
height: parent.height
Rectangle {
color: UbuntuColors.blue
opacity: 0.1
anchors.fill: parent
visible: button.pressed
}
Label {
anchors.centerIn: parent
id: label
text: action.text
font.weight: text === "Confirm"
? Font.Normal
: Font.Light
}
}
}
leadingActionBar {
anchors.leftMargin: 0
actions: Action {
text: "Cancel"
iconName: "close"
onTriggered: page.header = standardHeader
}
delegate: editHeader.delegate
}
trailingActionBar {
anchors.rightMargin: 0
actions: Action {
text: "Confirm"
iconName: "tick"
onTriggered: page.header = standardHeader
}
delegate: editHeader.delegate
}
extension: Toolbar {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
trailingActionBar.actions: [
Action { iconName: "bookmark-new" },
Action { iconName: "add" },
Action { iconName: "edit-select-all" },
Action { iconName: "edit-copy" },
Action { iconName: "select" }
]
leadingActionBar.actions: Action {
iconName: "delete"
text: "delete"
onTriggered: print("Delete action triggered")
}
}
}
}
}

运行我们的例程：







整个项目的源码在：https://github.com/liu-xiao-guo/pageheader4

５）定制header

我们可以对header的显示进行定制，这样可以根据我们的喜好进行颜色的搭配等．我们可以使用StyleHints来修改我们的显示．大家也可以设计自己的主题并通过PageHeaderStyle来调整我们的显示．

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "pageheader5.liu-xiao-guo"

width: units.gu(100)
height: units.gu(75)

Page {
header: PageHeader {
title: "Ubuntu header"
StyleHints {
foregroundColor: "white"
backgroundColor: UbuntuColors.blue
dividerColor: UbuntuColors.ash
contentHeight: units.gu(7)
}
trailingActionBar {
actions: [
Action {
iconName: "info"
text: "Information"
},
Action {
iconName: "settings"
text: "Settings"
}
]
}
}
}
}

运行我们的应用：



我们发现我们的header的颜色发生了改变．项目的源码在：https://github.com/liu-xiao-guo/pageheader5