如何使用Panel来实现一个可以从屏幕边缘拖出或拖进的控制面板

在Ubuntu QML设计中，我们可以使用Panel API来实现一个可以在屏幕边缘拖进或拖出的控制面板。用户只需要在屏幕的边缘滑动即可把Panel显现或影藏出来。

具体的设计非常简单：

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \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: "panel.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

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

    Page {
        title: i18n.tr("Panel")

        Panel {
            id: panel
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
            }
            height: units.gu(8)

            Rectangle {
                color: Theme.palette.normal.overlay
                anchors.fill: parent
                Row {
                    anchors.centerIn: parent
                    spacing: units.gu(2)

                    Repeater {
                        model: ["red", "blue", "green"]

                        Rectangle {
                            width: units.gu(8)
                            height: units.gu(4)
                            color: modelData
                            function trigger() {
                                print("Color rect is clicked");
                            }
                        }
                    }
                }
            }
        }

        Component.onCompleted: panel.open();
    }
}

在这里，我们设计了一个简单的在屏幕下方的一个Panel。我们简单地在里面划了三个自己方块。当然，我们也可以放上自己的Control，虽然在Control上面滑动时不能隐藏Panel (需要点击在非Control的地方就像在API文档中介绍的那样）。我们的Panel在应用启动时已经打开了。就像API文档介绍的那样，一般情况下，我们会选择MainView中的toolbar来实现相应的功能。

运行这个简单的程序：

    

整个项目的源码在：https://github.com/liu-xiao-guo/Panel