如何在Ubuntu手机中使得一个应用是全屏的应用 - Ubuntu.Components 1.3

在我先前的文章"如何在Ubuntu手机中使得一个应用是全屏的应用",我已经介绍了如何在Ubuntu手机上实现一个全屏的应用.随着我们手机软件的演化.我们需要使用更高版本的Ubuntu.Components来实现我们所需要的功能.我们先前的trick再也不能使用了.在这篇文章中,我们将介绍如何在更高版本的Ubuntu.Components来实现Full View.

充分利用Ubuntu Component 1.3新的feature


我们可以参照 PageHeader tutorial文章来重新编写我们的例程如下:

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    id: main
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"
    
    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "headertest.liu-xiao-guo"
    
    width: units.gu(100)
    height: units.gu(85)
    
    Page {
        id: page
        header: Item { visible:false }
        
        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }
            
            Button {
                objectName: "button"
                width: parent.width
                
                text: i18n.tr("Tap me!")
                
                onClicked: {
                    main.headerColor = "red"
                    main.backgroundColor = "blue"
                    main.footerColor = "yellow"
                    page.header.visible = false
                }
            }
        }
    }
}


在这里,我们在我们的Page里设置了一个不可见的header,同时把它的可见属性设置为false:

header: Item { visible:false }

运行我们的应用:

  

整个项目的代码在: https://github.com/liu-xiao-guo/headertest. 更多关于Ubuntu UI toolkit的信息,可以在地址:

找到.另外值得指出的是:

  1. 不要在应用中使用不同版本的Ubuntu Components 版本尽管在上面我们使用了这个trick
  2. 在Ubuntu Components 1.1/1.2,可以使用page.title及page.head.对于Ubuntu Components 1.3来说,需要使用page.header来完成