×
Namespaces

Variants
Actions

制作适应屏幕旋转的QML界面

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
平台:
Symbian

文章
hozhou 在 15 Mar 2011 创建
最后由 hamishwillee 在 13 Jun 2012 编辑

Contents

引言

当手机由竖屏切换成横屏时我们通常需要调整程序的UI布局以适应屏幕; 或者更进一步当手机的方向发生变化时,如果我们也想让程序的UI随之改变该怎么做呢?那么本文就为大家介绍一种思路。


使用sensor感知方向变化

现在QML中已经可以直接使用Sensor了,不需要我们自己再通过c++代码的方式间接访问。我们获得当前手机方向信息后,就把当前状态设置为对应状态,而后我们就可以根据不同的状态进行布局了。

    OrientationSensor {
id: orientation
active: true
 
onReadingChanged: {
if (reading.orientation == OrientationReading.TopUp)
content.state = "TopUp";
else if (reading.orientation == OrientationReading.TopDown)
content.state = "TopDown";
else if (reading.orientation == OrientationReading.LeftUp)
content.state = "LeftUp";
else if (reading.orientation == OrientationReading.RightUp)
content.state = "RightUp";
else if (reading.orientation == OrientationReading.FaceUp)
content.state = "FaceUp";
else if (reading.orientation == OrientationReading.FaceDown)
content.state = "FaceDown";
else
content.state = "";
}
}

切换布局

根据状态设置每一个矩形的宽度,从而适应屏幕的变化。

        Flow {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 10
spacing: 4
Rectangle {
width: (content.state == "LeftUp" || content.state == "RightUp") ? (parent.width-8)/3 : (parent.width-4)/2
height: 60
color: "yellow"
Text {
text: "1"
color: "black"
font.pointSize: 10
anchors.centerIn: parent
}
}
// ...以下省略


程序截图

Shuping.jpg

Hengping.jpg

下载例程

Media:qmlhengshu.zip

相关链接

This page was last modified on 13 June 2012, at 13:59.
131 page views in the last 30 days.
×