引言
当手机由竖屏切换成横屏时我们通常需要调整程序的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
}
}
// ...以下省略