Question

我有一个更大的QML项目，我试图重构，以便一些相关的组件在他们自己的文件中。在我的简化示例中， ThingManager.qml 的一部分以前只包含在 main.qml 文件中。在重构之前， page.qml 可以看到ID a ， b 和 c 的范围它们是在主文件中定义的。当我尝试将这些内容抽象为ThingManager组件以减少 main.qml 中的混乱时， page.qml 不再能够引用那些带有常见范围错误的组件：< / p>

page.qml：9：ReferenceError：a未定义

鉴于我正在加载类似于page.qml的页面，并希望在这些组件中执行存储在另一个文件中的方法，那么重构像这个例子的推荐方法是什么，以便 page.qml 可以访问这些组件中的方法而不在main.qml中定义它们吗？或者这根本不可能做到？

main.qml：

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQml 2.2

ApplicationWindow {
    id: window

    ThingManager { }

    Loader {
            id: page_loader
    }

    Component.onCompleted: {
            page_loader.setSource("page.qml")
    }
}

ThingManager.qml：

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3

Item {
    Column {
            Button {
                    id: a
                    text: "A"
            }
            Button {
                    id: b
                    text: "B"
            }
            Button {
                    id: c
                    text: "C"
            }
    }
}

page.qml：

import QtQuick 2.7
import QtQuick.Controls 2.1

Page {
        id: page

        Component.onCompleted: {
                console.log("Execute A's method")
                a.toggle()
        }
}

Answer 1

您应该向ThingManager添加一个ID，并将a定义为ThingManager.qml中的别名属性，如下所示：

<强> main.qml ：

...
ThingManager {id: manager }
...

<强> ThingManager.qml ：

Item {
    property alias a: a // makes 'a' available outside this file
    property alias b: b
    property alias c: c

    ...
}

<强> page.qml ：

...
manager.a.toggle ()
...

重构QML并将组件保持在范围内

1 个答案: