qt qml 高宽自动适配android设备

本篇主要是QML移植到android设备宽高的适配，其他设备没有尝试过。

字体和布局，网上其他的博客很清楚了

具体实现很简单，将在android设备上的尺寸分别除以在pc上设置的长宽得到长宽的比例，其他的就在长宽的比例中去一个中间值。

下面就用我最近写得模仿qq登录的界面中的运用

Window {
    id: main;
    color: "white";
    visible: true
    width: 360;//pc端的设置对android无影响
    height: 640;

<span style="white-space:pre">	</span>//除以得到系数
    property real multiplierH: main.height/640;
    property real multiplierW: main.width/360;
<span style="white-space:pre">	</span>//计算高的函数
    function dpH(numbers) {
           return numbers*multiplierH;
       }//计算宽的函数
   function dpW(numbers) {

       return numbers*multiplierW;
   }
<span style="white-space:pre">	</span>//平均值函数
   function dpX(numbers){
       return (dpW(numbers)+dpH(numbers))/2;
   }
    
    Rectangle{
        id: bg_rect;
        anchors.fill: parent;
        color: "#ecedf1";
        z: 0;
    }

    Column{

        width: parent.width;
        height: dpH(150);//运用
        x: 0;
        y: dpH(100);
        TextField{

            id :username_TF;

            x: 0;
            y: 0;
            z: 1;
            width: dpW(parent.width);
            height: dpH(30);

            placeholderText: "QQ号/手机号/邮箱";


            style:TextFieldStyle{

                background: Rectangle {
                            color: "white";
                        }
                }

        }



        TextField{

            id :password_TF;

            x: 0;
            y: dpH(30);
            z: 1;
            width: dpW(parent.width);
            height: dpH(30);
            echoMode: 2;
            placeholderText: "密码";

            style:TextFieldStyle{
                background: Rectangle {
                            color: "white";
                        }
                }

        }

        Rectangle{
            id: line_rect;
            color: "#eaecee";
            height: dpH(1);
            width: parent.width;
            x: 0;
            y: dpH(30);
            z: 1;
        }

        Rectangle {
            id: login_button;
            anchors.left: parent.left;
            anchors.leftMargin: dpW(10);
            anchors.bottom: parent.bottom;
            anchors.bottomMargin: dpH(50);


            color: "#1eb9f2";
            width: dpW(340);
            height: dpH(30);
            radius: dpX(4);
            border.color: "#1eb9f2";
            border.width: dpX(1);

            Text{
                id: login_button_text;
                anchors.centerIn: parent;

                color: "white";
                font.family: "微软雅黑";
                text: "登 录";
            }

           
            }
        }
    

}

效果如下

android端的

pc端效果

可能还有更简单的方法 希望对你有帮助