QML 从无到有 2 (移动适配)

时间:2023-03-09 07:31:26
QML 从无到有 2 (移动适配)

随着项目深入,需要移植到安卓上,问题来了,QML安卓适配!

幸好PC端程序和手机屏幕长宽比例相似。虽然单位像素,尺寸不同,通过比例缩放,可以实现组件PC和安卓通用代码。

第一步:定义全局的转换函数(300,500是你的PC端设计尺寸)

 property var x_scale:mainWindow.width/300
property var y_scale:mainWindow.height/500 function get_x(x)
{
return x*x_scale;
}
function get_y(y)
{
return y*y_scale;
}

第二步:将所有相关尺寸的都通过上面的转换函数计算新值

 Text {
id:nameText
x:get_x(8)
y:get_y(11)
width:get_x(80)
horizontalAlignment:Text.AlignRight
color: "#000000"
text: ""
}

第三步:对于有些控件,安卓和PC端表现形式不一样,需要通过判断平台,额外定义。判断平台代码

function is_android()
{
return (Qt.platform.os == "android");
} //调用方法
Image {
id: imageLogo
y: get_y(58)
width: get_x(167)
height: get_y(70)
anchors.horizontalCenterOffset: is_android()?get_x(-8):get_x(-4)
anchors.horizontalCenter: parent.horizontalCenter
source: "logo.png"
}

最后,对于字体的大小的适配,推荐使用pixelSize来定义,同样需要转换函数来计算新的尺寸,这样可以跟其他控件保持一致。