QML跨文件共享Screen宽高属性时子页面无法访问全局属性问题

1. QML 组件的自定义属性不默认向下继承，仅在当前组件的作用域内可直接访问，你在ApplicationWindow中定义的globalWidth/globalHeight没有显式传递给子Page组件，所以子组件无法直接读取。你观察到字符串类型属性可正常访问，大概率是之前无意中做了传递或者上下文挂载，不属于QML默认特性。
2. Qt Quick 表单编辑器（预览器）不会完整加载运行时的上下文环境，Screen相关的属性在预览阶段未完成初始化，所以会出现预览尺寸为0的情况，运行时正常是因为程序启动后Screen属性已经完成赋值。
3. 组件id仅在当前QML文件作用域生效，跨文件直接调用mainWindow的属性本来就不符合QML的作用域规则，自然无法读取。

方案1：显式传参（低耦合，适合少量属性共享） #

第一步：在所有子Page组件的头部声明需要接收的属性，可附加默认值解决预览异常问题

// Page2Form.qml 头部新增
Page {
    id: localPage2
    // 声明接收属性，设置默认值适配设计器预览
    property int globalWidth: 400
    property int globalHeight: 300
    // 原有代码不变
}

第二步：在Main.qml中实例化子组件时，把属性值传递进去

SwipeView {
    id: swipeView
    anchors.fill: parent
    currentIndex: tabBar.currentIndex

    Page1Form {
        globalWidth: mainWindow.globalWidth
        globalHeight: mainWindow.globalHeight
    }
    Page2Form {
        globalWidth: mainWindow.globalWidth
        globalHeight: mainWindow.globalHeight
    }
    Page3Form {
        globalWidth: mainWindow.globalWidth
        globalHeight: mainWindow.globalHeight
    }
}

方案2：QML单例（最适合全局通用属性共享） #

第一步：新建GlobalConfig.qml文件，定义单例存储全局属性

pragma Singleton
import QtQuick 2.15

QtObject {
    // 所有全局共享属性统一放在这里
    readonly property int globalWidth: Screen.width / 2
    readonly property int globalHeight: Screen.height / 3
}

第二步：在同目录下新建qmldir文件，注册单例

singleton GlobalConfig 1.0 GlobalConfig.qml

第三步：在任意QML文件中直接调用即可，不需要额外传参

// 任意QML文件，包括Main.qml和所有子Page
width: GlobalConfig.globalWidth
height: GlobalConfig.globalHeight

方案3：C上下文注入（适合需要和C逻辑联动的场景） #

在C++加载QML引擎的代码中，把全局属性注入到根上下文：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QScreen>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    // 注入全局属性
    QScreen *screen = app.primaryScreen();
    engine.rootContext()->setContextProperty("globalWidth", screen->geometry().width() / 2);
    engine.rootContext()->setContextProperty("globalHeight", screen->geometry().height() / 3);

    engine.load(QUrl(QStringLiteral("qrc:/Main.qml")));
    return app.exec();
}

注入后所有QML文件可以直接读取globalWidth、globalHeight变量。

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