How to make an application full screen in Ubuntu mobile phone, ubuntu full screen

How to make an application full screen in Ubuntu mobile phone, ubuntu full screen

We know that many developers want to set their applications to full screen, so that they can occupy more effective area of the screen to make their applications look better. In the default SDK template, there is a "title" at the top of the application, which occupies a lot of space. For some applications, this may not be useful in the main interface, but for applications using PageStack, this area displays a left arrow to return to the previous page. Recently, I also had this problem. I want to use PageStack for convenience and full screen functionality. In this article, we will introduce how to implement full screen applications. In addition, it is worth noting that our full screen application cannot overwrite the top status bar of the mobile phone.

We use our Ubuntu SDK to create a basic application (QML App with Simple UI ). The content of Main. qml is as follows:

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!")                }            }        }    }}

By default, our application runs as follows:

As shown in the figure above, whether on a mobile phone or on a mobile phone, there is a "Simple" header, occupying some space. To get more space, we set the title of the Page to null, that is:

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!")                }            }        }    }}

Re-run our application:

We can see that the "title" area is missing. The application occupies a larger range.

For applications that do not want to use PageStack, we do not need to use Page. You can directly use the following method to occupy the entire valid screen area:

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"    }}

In this way, we can get the full screen application.