How to make an application full screen in Ubuntu mobile phone

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, A & ldquo; title & rdquo; on the top of the application 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 Pa

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.0
Import Ubuntu. component 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.0
Import Ubuntu. component 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.0
Import Ubuntu. component 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.

For more information about Ubuntu, see Ubuntu special page http://www.linuxidc.com/topicnews.aspx? Tid = 2

This article permanently updates the link address: Http://www.linuxidc.com/Linux/2015-04/116624.htm