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来定义，同样需要转换函数来计算新的尺寸，这样可以跟其他控件保持一致。

巴特西

QML 从无到有 2 （移动适配）

最新文章

热门文章