QML中Loader加载组件无法获取尺寸的原因及解决方向咨询

首先得明确问题出在哪：你的TestSourcePage.qml根元素是Item，它默认没有隐式尺寸（implicitWidth/implicitHeight），而且里面的Rectangle虽然设置了固定宽高，但没有让根Item的尺寸跟它同步。这就导致Loader加载完成后，根Item的尺寸还是默认的0，你自然拿不到正确的数值。

为什么两种方式都输出0？ #

• Approach#1（Loader.Ready状态）：此时Loader确实完成了组件加载，但Qt Quick的布局系统还没来得及根据子元素的尺寸更新根Item的尺寸——毕竟Item不会自动继承子元素的尺寸，必须显式绑定。
• Approach#2（Component.onCompleted）：这个信号是组件实例化完成时触发的，但同样，布局计算还没走完，根Item的尺寸还没被子Rectangle驱动更新，所以拿到的还是初始值0。

优化方案 #

这里给你几个实用的解决思路：

方案1：给根Item绑定隐式尺寸到子Rectangle

修改TestSourcePage.qml，让根Item的隐式尺寸直接关联子Rectangle的尺寸：

Item {
    // 绑定隐式尺寸到子Rectangle的宽高
    implicitWidth: rect.width
    implicitHeight: rect.height

    Rectangle {
        id: rect
        color: 'red'
        width: 700
        height: 700
    }
}

这样Loader的item.implicitWidth就能正确拿到700，ApplicationWindow的尺寸也会跟着同步。

方案2：简化根元素，直接用Rectangle作为根

如果不需要额外的Item作为容器，直接把Rectangle作为TestSourcePage.qml的根元素：

Rectangle {
    color: 'red'
    width: 700
    height: 700
}

Rectangle本身有明确的宽高，Loader加载后item.width直接就是700，一步到位。

方案3：使用布局系统管理尺寸（适合复杂场景）

如果你的页面布局更复杂，比如有多个子元素，推荐用Qt Quick Layouts来自动计算容器尺寸：

import QtQuick.Layouts 1.15

Item {
    // 让布局自动计算隐式尺寸
    implicitWidth: layout.implicitWidth
    implicitHeight: layout.implicitHeight

    ColumnLayout {
        id: layout
        anchors.fill: parent

        Rectangle {
            color: 'red'
            width: 700
            height: 700
            Layout.alignment: Qt.AlignCenter
        }
    }
}

Layout会自动根据子元素的尺寸计算容器的隐式尺寸，后续子元素尺寸变化时也能自动更新。

另外，你也可以把ApplicationWindow的宽高直接绑定到Loader的item.width和item.height，只要根元素的尺寸正确，就能实现窗口自适应加载页面的效果。

内容的提问来源于stack exchange，提问作者Guilherme Souza