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

Source: Internet
Author: User
Tags i18n

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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.