Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

From 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 10:59.
203 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×