How to make an app in Ubuntu phone a full-screen app

We know that many developers want to set their own applications to full-screen applications, which allows the app to occupy more of the screen's effective area to make its app look better. In the default SDK template, at the top of the app, there is a "title" where a lot of space is occupied.　For some applications, this may not be useful in the main interface, but for applications that use Pagestack, this area displays a left arrow to return to the previous page. Recently I have such a problem, I want to use pagestack to give me the convenience, but also want to have full-screen function. In this article, we'll show you how to do a full-screen application. Another thing we should point out is that our full-screen app doesn't cover the top of the phone's status bar.

We use our Ubuntu SDK to create one of the most basic applications (the QML app with the simple UI). The contents of MAIN.QML are 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"/* Th Is 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 (height:units.gu) page {title:i18n.tr ("simple") Column {spacing:units.gu (1) Anchors {margins:units.gu (2) fill:p Arent} label {Id:label objectName: "Label" text:i18            n.tr ("Hello..") } Button {objEctname: "button" Width:parent.width text:i18n.tr ("Tap me!") onclicked: {label.text = i18n.tr (".. world! ")}}}}

By default, we run our app and display the following:

As can be seen from the above figure, whether it is on the phone or on the phone, there is a "simple" header there, occupy some space. To get more space, we set the page title to NULL, which 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"/* Th Is 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 (Height:units.gu) Page {title:i18n.tr ("") Colu            MN {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 app:

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

For apps that don't want to use pagestack, we don't have to use page. We can use the following method directly to occupy the entire effective 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 the click Manifest    AP Plicationname: "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 (height:units.gu)    Rectangle {        Anchors.fill: Parent        color: "Red"    }}

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

How to make an app in Ubuntu phone a full-screen app