Ubuntu.Components 1.3上的PageHeader教程_Elastic 中国社区官方博客的博客-程序员宅基地

在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．运行我们的代码：





２）使用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（如果数量多，就会出现＂三＂字行的符号供打开）．



３）自动显示及影藏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就会被自动影藏．

  



４）扩展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


版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UbuntuTouch/article/details/50836461

智能推荐

kh dksl.php,看看下面这个php代码是使用什么加密的?_weixin_39889788的博客-程序员宅基地

加密的代码如下：!/usr/bin/php -qeNrtWWlTG1cW/SvY5Yqg4krevoSQuIUEiE0LYAwuijKbEGA2YbMk+TUOjEnyc976b+Y2pKZqpNcgz3gm46r5BpL69Ln3nnvved3PrrFyRhOJEAoySvT66ceoMFbS02BNEFE8XRsLRAmkHI7eKMxMHC7tnKOz+Ytuezt7SUrPS6TcOa0c...

35：easygui_荒漠天际的博客-程序员宅基地

一、导入模块1.>>> import easygui>>> easygui.msgbox('Hello')'OK'2.>>> from easygui import *>>> msgbox('嗨，小美女')3.>>> import easygui as g>&

基于OpenResty和Node.js的微服务架构实践_weixin_30856725的博客-程序员宅基地

什么是微服务？传统的单体服务架构是单独服务包，共享代码与数据，开发成本较高，可维护性、伸缩性较差，技术转型、跨语言配合相对困难。而微服务架构强调一个服务负责一项业务，服务可以单独部署，独立进行技术选型和开发，服务间松耦合，服务依赖的数据也独立维护管理。虽然微服务存在部署复杂、运维难度较大、分布式事务控制难、容错要求高等缺点，但总体而言，微服务的优点远大于其复杂性。微服务架构需要注意哪些...

JVM入门学习笔记——上篇：内存与垃圾回收（10-13）_angenin的博客-程序员宅基地

10、对象的实例化内存布局与访问定位11、直接内存12、执行引擎13、StringTable

青岛大学2018秋《C语言程序设计》期末模拟练习-第I部分_喝茶喝咖啡非常喜欢冰的博客-程序员宅基地_以下代码语法正确的是

一、判断题1-1下面这段代码，对a采用八进制数值进行赋值，因此打印输出的结果是945。(2分) F#include <stdio.h>int main(){ int a,b; a = 029; b = 920; printf("%d", a+b); return 0;}1-2假设某段C语言程序中定义了两个变量a、b，并且两个变量都不为0，则表达式 a / b的值必不为0。(2分) F1-3下面这段程序，将循环有限次，在打印输出有限行之

依托大数据 构建税收共治格局_weixin_33834137的博客-程序员宅基地

在打牢基础上下功夫，多角度构建税收大数据集群；在深化应用上下功夫，多层次挖掘税收大数据价值；在升级拓展上下功夫，多维度推动税收大数据创新中办、国办发布的《深化国税、地税征管体制改革方案》从国家治理高度对税制改革作出部署，对税收事业的改革创新发展具有里程碑意义。树立和践行共治思维，以“信息高度聚合”为切入点，打破影响和制约税收治理体系和治理能力现代化的瓶...

随便推点

oracle 总僵尸进程,[sh] <defunct>等僵尸进程，导致系统非常缓慢(ORA-00445)_韦臻的博客-程序员宅基地

In this DocumentAPPLIES TO:Oracle Database - Enterprise Edition - Version 11.2.0.1 to 12.1.0.1 [Release 11.2 to 12.1]CRM On Demand - Version N/A to N/AIBM: Linux on System zLinux x86-64Linux x86SYMPTO...

Python之正则表达式与[email protected]的博客-程序员宅基地_python正则表达式匹配json

Python之正则表达式与JSON1、定义正则表达式是一个特殊的字符序列，一个字符串是否与我们所设定的这样的字符序列，相匹配。可以快速检索文本，实现一些替换文本的操作a = ‘C|C++|C#|Python|Javascript’print(a.index('Python')&gt; -1)print('Pythin' in a)import rea = ‘C|C++|C#|Python|Javascript’r = re.findall('Python', a) #返回一个列表

在Visio中建立数据库模型的步骤_weixin_30436101的博客-程序员宅基地

下载在Visio中建立数据库模型的步骤.doc转载于:https://www.cnblogs.com/smallfa/archive/2010/05/22/1741695.html

Leaflet中使用markerCluster实现点聚合效果_霸道流氓气质的博客-程序员宅基地_leaflet 聚合

场景Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标：Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-程序员宅基地在上面实现地图上添加marker标记的功能之后，如果点位特别多，怎样实现聚合效果。官方提供了插件官方插件github地址：https://github.com/Leaflet/Leaflet.markercluster示例地址：Leaflet debug page按照其官方

adb devices 报错failed to start daemon_blingbling＊的博客-程序员宅基地

adb server version (31) doesn’t match this client (41); killing…could not read ok from ADB Serverfailed to start daemonadb.exe: failed to check server version: cannot connect to daemon查资料发现：这个是so...

华为WLAN基本概述_renkie人可毅的博客-程序员宅基地_华为wlan

介绍了WLAN的基本概念以及WLAN的工作原理。文章最后附上了自己整理的思维导图。

推荐文章

热门文章

相关标签