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

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

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

我們使用我們的Ubuntu SDK來建立一個最基本的應用（QML App with Simple UI）。Main.qml的內容如下：

import QtQuick 2.0import 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.0import 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.0import 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"    }}

  

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