如何使用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();
    }
}

运行这个简单的程序：

整个项目的源码在：git clone https://gitcafe.com/ubuntu/Panel.git

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

标签：

原文地址：http://blog.csdn.net/ubuntutouch/article/details/46004179