Ubuntu.Components 1.3上的PageHeader教程

于 2016-03-09 17:52:21 发布
阅读量1.2k 收藏
点赞数
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/ubuntutouch/article/details/50836461
版权

在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


Elastic 中国社区官方博客
关注
专栏目录
博客
Elasticsearch 开放推理 API 新增阿里云 AI 搜索支持
09-19 1429
我们很高兴地宣布，Elasticsearch 开放推理 API 新增了阿里云 AI 搜索的集成功能。此项工作使 Elastic 用户能够直接连接到阿里云 AI 平台。使用 Elasticsearch 向量数据库构建 RAG 应用程序的开发人员可以使用 semantic_text 存储和使用托管在阿里云 AI 搜索平台上的模型生成的密集和稀疏嵌入。此外，Elastic 用户现在可以集成访问重新排名模型，以增强语义重新排名和LLM 系列。
博客
Elastic 线下 Meetup 将于 2024 年 9 月 21 号在成都举办
08-29 1640
2024 Elastic Meetup 成都站活动，由 Elastic、腾讯、新智锦绣联合举办，现诚邀广大技术爱好者及开发者参加。
博客
Elastic：如何成为一名 Elastic 认证工程师，Elastic 认证分析师及 Elastic 认证可观测性工程师
10-28 2万+
Elasticsearch 无疑是是目前世界上最为流行的大数据搜索引擎。根据 DB - Engines 的统计，Elasticsearch 雄踞排行榜第一名，并且市场还在不断地扩大：能够成为一名 Elastic 认证工程师也是很多开发者的梦想。这个代表了 Elastic 的最高认证，在业界也得到了很高的认知度。得到认证的工程师，必须除了具有丰富的 Elastic Stack 知识，而且必须有丰富的操作及有效的解决问题的能力。拥有这个认证证书，也代表了个人及公司的荣誉。针对个人的好处是，你可以..
博客
Elastic：开发者上手指南
02-25 15万+
你们好，我是Elastic的刘晓国。如果大家想开始学习Elastic的话，那么这里将是你理想的学习园地。在我的博客几乎涵盖了你想学习的许多方面。在这里，我来讲述一下作为一个菜鸟该如何阅读我的这些博客文章。我们可以按照如下的步骤来学习：1)Elasticsearch简介：对Elasticsearch做了一个简单的介绍2)Elasticsearch中的一些重要概念:cluster, n..........................................................
博客
Elastic：培训视频 - ​在生产环境中配置 Fleet Server 和 Elastic Agent 之间的安全
01-06 1万+
在这篇文章中，我将会把我写的有些内容录制成视频，供大家参考。希望对大家有所帮助。优酷的视频频道地址在这里。Elastic 简介及Elastic Stack 安装：优酷，腾讯 Elastic Stack docker 部署：优酷，腾讯 Elasticsearch中的一些重要概念（Cluster/Shards/Replica/Document/Type/Index）：优酷，腾讯 开始使用El...............
博客
Elasticsearch 简介
08-08 17万+
Elasticsearch是一个非常强大的搜索引擎。它目前被广泛地使用于各个IT公司。Elasticsearch是由Elastic公司创建并开源维护的。它的开源代码位于https://github.com/elastic/elasticsearch。同时，Elastic公司也拥有Logstash及Kibana开源项目。这个三个开源项目组合在一起，就形成了 ELK软件栈。他们三个共同形成了一个强大的...
博客
Observability：构建下一代托管接入服务
09-21 993
随着无服务器（serverless）的引入，向 Elastic Cloud 发送可观察性数据变得越来越容易。你可以在中创建一个可观察性无服务器项目，并将可观察性信号直接发送到 Elasticsearch 或通过我们一直称之为托管接收服务（类似于 Elastic APM 服务器的完全托管解决方案）发送。你不再需要担心 APM 服务器的大小和配置。相反，你可以将数据直接发送到托管接收服务，让我们的平台为你完成艰难的扩展工作。
博客
LangChain 和 Elasticsearch 加速构建 AI 检索代理
09-20 1193
​Elastic 和 LangChain 很高兴地宣布发布新的 LangGraph 检索代理模板，旨在简化需要代理使用 Elasticsearch 进行代理检索的生成式人工智能 (GenAI) 代理应用程序的开发。此模板预先配置为使用 Elasticsearch，允许开发人员使用 LangChain 和 Elasticsearch 快速构建代理。要立即开始，请访问 github 上的项目：https://github.com/langchain-ai/retrieval-agent-template
博客
Elasticsearch：检索增强生成背后的重要思想
09-20 1939
星期天晚上 10 点，我九年级的女儿哭着冲进我的房间。她说她对代数一无所知，注定要失败。我进入超级妈妈模式，却发现我一点高中数学知识都不记得了。于是，我做了任何一位超级妈妈在 2024 年都会做的事情，前往 ChatGPT 寻求帮助。这些生成式 AI 聊天机器人太棒了。我很快就得到了关于如何解决她所有问题的详细解释。“但是妈妈，”她抱怨道，“我们不是这样做的！”如果我能让 ChatGPT 的答案与班级的特定做事方式保持一致就好了……
博客
Elasticsearch：一次生产集群 ES Watcher 失效的深度排查与分析 - 全过程剖析与解决方案
09-19 1363
Watcher是 Elasticsearch 提供的一项监控和告警服务，允许用户定义、管理警报规则，并持续跟踪网络和数据的变化。基于 Elasticsearch 的分布式架构，Watcher 可以对基础设施、索引数据、集群健康等多种指标进行实时监控和自动化告警。当预设条件被触发时，Watcher 会及时发送通知。这项功能特别适用于日志数据的监控、应用性能追踪，以及其他需要自动化响应的场景，帮助运维人员快速响应潜在问题，提升系统稳定性和可靠性。1）定时监控数据。
博客
Elastic 的 OpenTelemetry PHP 发行版简介
09-18 1382
宣布 OpenTelemetry PHP 的 Elastic 发行版的第一个 alpha 版本。在本篇博文中了解使用 OpenTelemetry 来检测 PHP 应用程序是多么简单。我们很高兴推出 OpenTelemetry PHP 的 Elastic Distribution 的第一个 alpha 版本。在这篇文章中，你将了解如何轻松安装和设置 PHP 应用程序的监控。
博客
Elasticsearch：Open Crawler 现已进入测试阶段
09-18 2018
今天，我们发布了 Open Crawler 0.2 版，该版本也已升级为测试版！Open Crawler 最初于作为技术预览版发布（0.1 版）。从那时起，我们一直在迭代产品并添加了几个新功能。要访问这些更改，你可以使用最新的 Docker 工件，或直接从 GitHub 存储库下载源代码。按照我们文档中的设置说明开始使用。
博客
Observability：日志管理的最佳实践 - 利用日志更快地解决问题
09-17 1122
在当今快速发展的软件开发环境中，高效的日志管理对于维护系统可靠性和性能至关重要。随着基础架构和应用程序组件的不断扩展和复杂化，运营和开发团队的职责也不断增加且越来越复杂。这篇博文概述了有效日志管理的最佳实践，以应对数据量不断增长、基础架构复杂以及快速解决问题的需求等挑战。
博客
Kibana：如何使用魔法公式创建具有影响力的可视化效果？（第 1 部分）
09-16 883
在上一篇博文《作为非设计师设计直观的 Kibana 仪表板》中，我们强调了创建直观仪表板的重要性。它展示了简单的更改（分组主题、更改类型图表等）如何对理解数据产生影响。在提供Kibana 数据分析或课程等课程时，我们强调了这篇博文以及这些更改如何帮助将重要信息带到表面。我喜欢一种互补的方法来实现这一目标：使用两种颜色将最高数据值与常见数据值区分开来。为了说明这个想法，我们将使用示例航班数据数据集。现在，让我们比较两个可视化，按航班总数排名前 10 个目的地国家。哪个可视化的影响更大？
博客
Observability：OpenTelemetry Java Agent Elastic 分布正式发布
09-15 1356
Elastic 宣布 OpenTelemetry (OTel) Java Agent 的 Elastic 发行版正式发布，这是一个与 OTel 完全兼容的代理，具有一组丰富实用的附加功能。随着 Elastic 继续致力于 OpenTelemetry (OTel)，我们很高兴地宣布) 正式上市。
博客
了解 BSI IT Grundschutz：使用 GenAI 搜索你的（私人）PDF 宝藏的秘诀
09-14 1124
有没有想过如何让多年来收集的文档可以通过语义而不是关键字进行搜索？处理充满有价值信息的 PDF 可能具有挑战性，尤其是在分块和创建跨多种语言的可搜索数据时。这篇博文将指导你将文档集合转换为 AI 驱动的语义搜索系统。我们将探索 Elastic 如何为 RAG 提供端到端解决方案：提取 PDF、将其处理成块、向量化内容，并提供一个交互式游乐场来查询和与数据交互。探索如何让你的信息不仅更易于访问，而且真正具有对话性。你将能够测试如何轻松创建相关信息摘要，了解每个给出的答案的相关性分数，并最大限度地了解创建答
博客
用于安全研究的 Elastic Container Project
09-13 1322
​Elastic Stack 是一个模块化数据分析生态系统。虽然这允许工程灵活性，但建立开发实例进行测试可能很麻烦。建立 Elastic Stack 的最简单方法是使用 Elastic Cloud - 这是完全一站式的。但是，在某些情况下，Elastic Cloud 可能不适用于你的测试环境。为了帮助解决这个问题，本博客将为你提供必要的信息，以便快速轻松地建立本地、完全容器化、TLS 安全的 Elastic Stack，并启用 Fleet 和检测引擎。你将能够创建 Fleet 策略，在本地主机或 VM 上
博客
使用 Elastic 和 LM Studio 的 Herding Llama 3.1
09-13 2028
最新的 LM Studio 0.3 更新使 Elastic 的安全 AI Assistant 能够更轻松、更快速地与 LM Studio 托管模型一起运行。在这篇博客中，Elastic 和 LM Studio 团队将向你展示如何在几分钟内开始使用。如果你在同一网络上或在你的机器上本地工作，则不再需要设置代理。
博客
Elastic 线上 Meetup “Elastic 认证及 Watcher 使用分享” 将于 9 月 18 号举办
09-13 697
Elastic 线上 Meetup “Elastic 认证及 Watcher 使用分享” 将于 9 月 18 号举办
博客
Elasticsearch 开放 inference API 为 Hugging Face 添加了原生分块支持
09-13 1365
​借助 Elasticsearch 开放推理 API，你可以使用 Hugging Face 的推理端点（Inference Endpoints）在 Elasticsearch 之外执行推理。这样你就可以使用 Hugging Face 的可扩展基础架构，包括在 GPU 和 AI 加速器上执行推理的能力。使用 Hugging Face 生成的嵌入的能力是作为 Elasticsearch 8.11 中的第一个开放推理 API 集成引入的，从那时起，我们一直在努力工作，并使用更强大的功能对其进行了更新，让您可以事
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值