如何在Ubuntu手機中使得一個應用是全屏的應用

我們知道很多的開發者想把自己的應用設置為全屏的應用，這樣可以使得應用能更多地占用屏幕的有效面積以使得自己的應用更好看。在默認的SDK的樣板中，在應用的最上面，有一個“title”的地方占用很多的空間。對於一些應用來說，在主界面中，這個可能並不有用，但是對於使用PageStack的應用來說，這個區域顯示一個向左的箭頭以返回上一個頁面的。　最近我也有這樣的問題，我既想使用PageStack給予我的方便，又想擁有全屏的功能。在這篇文章中，我們來介紹如何做到全屏的應用。另外我們值得指出的是：我們的全屏的應用不能覆蓋手機最上面的狀態欄。

我們使用我們的Ubuntu SDK來創建一個最基本的應用（QML App with Simple UI）。

Main.qml的內容如下：

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: "fullscreen.ubuntu"

    /*
    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(50)
    height: units.gu(75)

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

        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Label {
                id: label
                objectName: "label"

                text: i18n.tr("Hello..")
            }

            Button {
                objectName: "button"
                width: parent.width

                text: i18n.tr("Tap me!")

                onClicked: {
                    label.text = i18n.tr("..world!")
                }
            }
        }
    }
}

默認的情況下，我們運行我們的應用，顯示如下：

從上面的圖上可以看出來，無論是在手機或者是在手機上，有一個“Simple”的header在那裡，占用一些空間。為了得到更多的空間，我們把Page的title設為空，也即：

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: "fullscreen.ubuntu"

    /*
    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(50)
    height: units.gu(75)

    Page {
        title: i18n.tr("")

        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Label {
                id: label
                objectName: "label"

                text: i18n.tr("Hello..")
            }

            Button {
                objectName: "button"
                width: parent.width

                text: i18n.tr("Tap me!")

                onClicked: {
                    label.text = i18n.tr("..world!")
                }
            }
        }
    }
}

重新運行我們的應用：

我們顯然可以看到，“title”區域不見了。應用所占用的區間更大了。

不想使用PageStack的應用來說，我們也不必使用Page。我們可以直接使用如下的方法直接占用整個有效的屏幕區域： 

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: "fullscreen.ubuntu"

    /*
    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(50)
    height: units.gu(75)

    Rectangle {
        anchors.fill: parent
        color: "red"
    }

}

通過這樣的方法，我們就可以得到全屏的應用了。

更多Ubuntu相關信息見Ubuntu 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=2