在Ubuntu toolkit中，我们可以充分利用PageHeadSections（https://developer.ubuntu.com/api/apps/qml/sdk-15.04.1/Ubuntu.Components.PageHeadSections/）来对我们的每个页面的head section进行设定从而充分利用toolkit给我没带来的便利．在这篇文章中，我们来介绍如何充分利用PageHeadSections来设计一些动作．我们最终的界面如下：
我们的代码非常直接简单：
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: "pageheads.liu-xiao-guo"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
width: units.gu(60)
height: units.gu(85)
Page {
id: page
title: i18n.tr("pageheads")
head.backAction: Action {
text: "Cancel"
iconName: "back"
onTriggered: {
console.log("back is triggered")
}
}
head.actions: [
Action {
text: "select"
iconName: "select"
onTriggered: {
console.log("select is triggered")
}
},
Action {
text: "Import"
iconName: "tick"
onTriggered: {
console.log("import is clicked")
}
}
]
head {
sections {
//model: ["one", "two", "three"]
actions: [
Action {
text: "Find"
iconName: "find"
onTriggered: {
console.log("search is triggered")
}
},
Action {
text: "Alarm"
iconName: "alarm-clock"
onTriggered: {
console.log("Alarm is triggered")
}
},
Action {
text: "Reload"
iconName: "reload"
onTriggered: {
console.log("reload is triggered")
}
}
]
}
}
Label {
anchors.centerIn: parent
text: "Section " + page.head.sections.selectedIndex
}
}
}
大家可以直接运行一下我们的应用．代码可以在地址下载：https://gitcafe.com/ubuntu/pagehead