1. 程式人生 > >OrientationHelper讓我們的UI隨我們的螢幕的旋轉而旋轉

OrientationHelper讓我們的UI隨我們的螢幕的旋轉而旋轉

對於一些應用來說,我們希望我們的手機的螢幕旋轉時,它裡面的內容也跟隨著旋轉。在iPhone裡其實我們也可以看到這樣類似的應用,無論你怎麼旋轉你的螢幕,在任何一個方向,你都可以玩你的遊戲。


在Ubuntu平臺裡,有一個OrientationHelper的API。它實現了上面的要求。具體的API的介面地址為:

我們來通過一個實驗來完成:

import QtQuick 2.0
import 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: "orientationhelper.liu-xiao-guo"

    /*
     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(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("")

        Item {
            anchors.fill: parent

            OrientationHelper {
//                orientationAngle: 90

                Column {
                    spacing: units.gu(3)
                    Label {
                        text: "Automatically rotated"
                    }
                    Button {
                        text: "Automatically rotated"
                    }

                    Image {
                        width: units.gu(10)
                        height: units.gu(17)
                        source: "images/pic1.jpg"
                    }
                }
            }
        }
    }
}

在上面的OrientationHelper裡面,我們放置了三個Control:Label, Button及Image。執行的效果如下:

  

   

在這裡,我們關掉了Main.qml中的:

//automaticOrientation:true

如果這個開關開啟,可能不是這個效果。