Qt Quick 准确的移动平台屏幕适配

网上大多数都是那一套公式,不适合拉伸布局,假如有一张图片或者一个被固定了大小的控件或图片,那么可能会失真,下面是自己实现的自适应,非常好用的说。而且网上大多数Qt quick开发群心高气傲,根本不要人加入。很多东西可以自己研究的,乐于分享的人太少

一句话,没图说个JB,开干！

下面写一个Col容器,宽度是固定的,这种情况下,在各种移动平台下会差别很大,不过根据我的算法就解决了,320*480是我写代码设计界面时用的界面size,在安卓上,size会根据系统的分辨率而不同,因此在代码中把320*480作为模板,换了系统会计算比例

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
//import QtQuick.Extras 1.4
import "./UI.js"  as Mui
ApplicationWindow {

    id:root;
    width: 320;
    height: 480;
    visible: true;
     //获取最终dpi
      //     targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;
//Screen.devicePixelRatio



    Component.onCompleted: {

    }
    property real pixelDensity: 4.46 
    property real multiplierH: root.height/480 //default multiplier, but can be changed by user
     property real multiplierW: root.width/320 //default multiplier, but can be changed by user
    function dpH(numbers) {

        return Math.round(numbers*((pixelDensity*25.4)/160)*multiplierH);
    }
    function dpW(numbers) {

        return Math.round(numbers*((pixelDensity*25.4)/160)*multiplierW);
    }


    Label{

           anchors.centerIn: parent
           id:label;
           text: "..";
    }

    //固定宽高自适应屏幕
        Column{

            spacing: dpH(1);
            width: dpW(440);
            Repeater{
                model: 17;
                delegate:Rectangle{
                    width: parent.width;
                    height:dpH(40);


                    color: "#2a9f8d"
                    Text {

                        color: "white";
                        font.bold: true;
                        font.pointSize:14;
                        text:index+ ",标题dp3+"+parent.height+","+multiplierH+","+multiplierW+",";
                        anchors.centerIn: parent;
                    }
                }
            }

        }




}

注意,设计中我把界面右边留了空白 最后一行为第16列并且显示不完全.这样容易看出差异:

在电脑上的效果,此时程序的窗口大小是320*480

在电脑上手动调整界面大小的效果,此时程序的窗口大小未知

在安卓模拟器上的效果,分辨率是1280*720 192dpi

来一段显示图片的代码,好用不失真

    Column{
        spacing: dpH(1);
        width: parent.width;
        Repeater{
            model: 5;
            delegate: BorderImage {
                id: name
                source: "astop.png"
                width: dpW(72); height: width
                border.left: dpW(1); border.top: dpH(1)
                border.right: dpW(1); border.bottom: dpH(1)
            }
        }
    }