為了讓QML開發的程式適應更多的裝置，我們可能需要去縮放Item，但是手動縮放開發太耗時還容易出錯，所以我封裝了一下

效果是根據開發時的x、y、width、height自動縮放的擴充套件

效果（3個效果是引數不同組合的結果）：

正常情況下

拉寬

拉長

拉大

AutoResize.qml程式碼：

import QtQuick 2.4

Item {
    property var targetItem: parent
    property bool fixedAspectRatio: true // Else zoom from width and height
    property bool accordingToX: true // Else according to center

    property var targetItemGeometry
    property var childrenItemGeometry

    property bool isBegin: false

    function begin() {
        targetItemGeometry = new Object;
        targetItemGeometry["width"] = targetItem.width;
        targetItemGeometry["height"] = targetItem.height;

        var children = targetItem.children;
        var data = new Array;
        for(var index = 1; index < children.length; index++)
        {
            var currentItem = children[index];
            var buf = new Object;

            buf["item"] = currentItem;
            buf["x"] = currentItem.x;
            buf["y"] = currentItem.y;
            buf["centerX"] = currentItem.x + (currentItem.width / 2);
            buf["centerY"] = currentItem.y + (currentItem.height / 2);
            buf["width"] = currentItem.width;
            buf["height"] = currentItem.height;

            data.push(buf);
        }

        childrenItemGeometry = data;
        isBegin = true;
    }

    function resize() {
        if(isBegin)
        {
            var horizontalRatio, verticalRatio;

            horizontalRatio = targetItem.width / targetItemGeometry["width"];
            verticalRatio = targetItem.height / targetItemGeometry["height"];

            for(var index = 0; index < childrenItemGeometry.length; index++)
            {
                if(fixedAspectRatio)
                {
                    if(horizontalRatio > verticalRatio)
                    {
                        childrenItemGeometry[index]["item"].width  = childrenItemGeometry[index]["width"] * verticalRatio;
                        childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * verticalRatio;
                    }
                    else
                    {
                        childrenItemGeometry[index]["item"].width  = childrenItemGeometry[index]["width"] * horizontalRatio;
                        childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * horizontalRatio;
                    }
                }
                else
                {
                    childrenItemGeometry[index]["item"].width  = childrenItemGeometry[index]["width"] * horizontalRatio;
                    childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * verticalRatio;
                }

                if(accordingToX)
                {
                    childrenItemGeometry[index]["item"].x = childrenItemGeometry[index]["x"] * horizontalRatio;
                    childrenItemGeometry[index]["item"].y = childrenItemGeometry[index]["y"] * verticalRatio;
                }
                else
                {
                    childrenItemGeometry[index]["item"].x = childrenItemGeometry[index]["centerX"] * horizontalRatio - (childrenItemGeometry[index]["item"].width / 2);
                    childrenItemGeometry[index]["item"].y = childrenItemGeometry[index]["centerY"] * verticalRatio - (childrenItemGeometry[index]["item"].height / 2);
                }
            }
        }
    }

    Component.onCompleted: {
        begin();
    }

    Component {
        id: connections

        Connections {
            target: targetItem

            onWidthChanged: {
                resize();
            }
            onHeightChanged:
            {
                resize();
            }
        }
    }

    Loader {
        Component.onCompleted: {
            sourceComponent = connections;
        }
    }
}
 

使用：

 Rectangle {
        width: parent.width / 2
        height: parent.height / 2
        color: "#00000000"

        AutoResize {
            fixedAspectRatio: true
            accordingToX: true
        }

        Rectangle {
            x: 15
            y: 10
            width: 80
            height: 200
            color: "#ff0000"
        }

        Rectangle {
            x: 15
            y: 210
            width: 200
            height: 80
            color: "#00ff00"
        }

        Rectangle {
            x: 124
            y: 43
            width: 247
            height: 20
            color: "#0000ff"
        }

        Rectangle {
            x: 242
            y: 140
            width: 150
            height: 150
            color: "#000000"
        }
    }
 

只要把AutoResize直接以例項化出來就可以了

注意：AutoResize建議放在第一個子控制元件的位置，不然可能會報錯而且需要手動初始化

引數說明：

fixedAspectRatio：固定長寬比，否則根據父物件長寬比縮放，預設true

示例下載地址：