在Ubuntu应用中应用PageHeadSections

在Ubuntu toolkit中，我们可以充分利用PageHeadSections来对我们的每个页面的head section进行设定从而充分利用toolkit给我没带来的便利．在这篇文章中，我们来介绍如何充分利用PageHeadSections来设计一些动作．在这里指出的是，page.title及page.head适合于在Ubuntu.Components 1.1/1.2的设计中．在Ubuntu.Components 1.3中，我们建议大家使用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: "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: "red"
                        iconName: "find"
                        onTriggered: {
                            console.log("red is triggered")
                            console.log("index: " + page.head.sections.selectedIndex)
                        }
                    },
                    Action {
                        text: "green"
                        iconName: "alarm-clock"
                        onTriggered: {
                            console.log("green is triggered")
                            console.log("index: " + page.head.sections.selectedIndex)
                        }
                    },
                    Action {
                        text: "blue"
                        iconName: "reload"
                        onTriggered: {
                            console.log("blue is triggered")
                            console.log("index: " + page.head.sections.selectedIndex)
                        }
                    }
                ]

                onSelectedIndexChanged: {
                    tabs.current = page.head.sections.selectedIndex
                }
            }
        }

        Column {
            anchors.fill: parent
            Label {
                id: label
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Section " + page.head.sections.selectedIndex
            }

            TabWidget {
                id: tabs
                width: parent.width
                height: parent.height - label.height

                Rectangle {
                    property string title: "Red"
                    anchors.fill: parent
                    color: "#e3e3e3"

                    Rectangle {
                        anchors.fill: parent; anchors.margins: 20
                        color: "#ff7f7f"
                        Text {
                            width: parent.width - 20
                            anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
                            text: "Roses are red"
                            font.pixelSize: 100
                            wrapMode: Text.WordWrap
                        }
                    }
                }

                Rectangle {
                    property string title: "Green"
                    anchors.fill: parent
                    color: "#e3e3e3"

                    Rectangle {
                        anchors.fill: parent; anchors.margins: 20
                        color: "#7fff7f"
                        Text {
                            width: parent.width - 20
                            anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
                            text: "Flower stems are green"
                            font.pixelSize: 100
                            wrapMode: Text.WordWrap
                        }
                    }
                }

                Rectangle {
                    property string title: "Blue"
                    anchors.fill: parent; color: "#e3e3e3"

                    Rectangle {
                        anchors.fill: parent; anchors.margins: 20
                        color: "#7f7fff"
                        Text {
                            width: parent.width - 20
                            anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
                            text: "Violets are blue"
                            font.pixelSize: 100
                            wrapMode: Text.WordWrap
                        }
                    }
                }

                Component.onCompleted: {
                    tabs.current = 0
                }
            }
        }
    }
}

TabWidget.qml

import QtQuick 2.0

Item {
    id: tabWidget

    // Setting the default property to stack.children means any child items
    // of the TabWidget are actually added to the 'stack' item's children.
    // See the "Property Binding"
    // documentation for details on default properties.
    default property alias content: stack.children

    property int current: 0

    onCurrentChanged: setOpacities()
    Component.onCompleted: setOpacities()

    function setOpacities() {
        for (var i = 0; i < stack.children.length; ++i) {
            stack.children[i].opacity = (i == current ? 1 : 0)
        }
    }

    Item {
        id: stack
        width: tabWidget.width
        anchors.fill: parent
    }
}

大家可以直接运行一下我们的应用．代码可以在地址下载： https://github.com/liu-xiao-guo/pagehead