PageHeadState API 浅析

Elastic 中国社区官方博客

于 2016-03-10 11:39:06 发布

阅读量802

点赞数

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/UbuntuTouch/article/details/50845128

移动开发同时被 2 个专栏收录

268 篇文章

订阅专栏

QML

185 篇文章

订阅专栏

本文介绍了一个名为PageHeadState的助手API，它能够帮助开发者在应用程序中更轻松地设置header状态。通过使用PageHeadState API，开发者可以在header上添加功能，如在点击特定图标后进入搜索模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PageHeadState API是一个helper API．当我们在转换我们的状态时，更好地帮我们轻松地设置我们的header．在下面的例程中，我们将展示如何在我们的header上加上一个action，当它被按下后，进入到搜索输入的模式：

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: "pageheadstate.liu-xiao-guo"

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

    Page {
        id: searchPage

        title: "Click the icon"
        Label {
            anchors.centerIn: parent
            text: searchPage.state == "search" ? "search mode" : "normal mode"
        }

        state: "default"
        states: [
            PageHeadState {
                name: "default"
                head: searchPage.head
                actions: Action {
                    iconName: "search"
                    onTriggered: searchPage.state = "search"
                }
            },
            PageHeadState {
                id: headerState
                name: "search"
                head: searchPage.head
                actions: [
                    Action {
                        iconName: "contact"
                    }
                ]
                backAction: Action {
                    id: leaveSearchAction
                    text: "back"
                    iconName: "back"
                    onTriggered: searchPage.state = "default"
                }
                contents: TextField {
                    placeholderText: "search..."
                }
            }
        ]
    }
}

运行我们的应用：