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

Question

我有一个更大的 QML 项目，我正在尝试对其进行重构，以便一些相关组件位于它们自己的文件中。在我的简化示例中，ThingManager.qml 的一部分以前只是简单地包含在 main.qml 文件中。在重构之前，ids、a、b 和 c 的范围对 page.qml 因为它们是在主文件中定义的。当我试图将它们抽象到 ThingManager 组件中以减少我的 main.qml 中的混乱时，page.qml 不再能够参考那些有熟悉的范围界定错误的人：

page.qml:9: ReferenceError: a is not defined

鉴于我正在加载类似于 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，并在ThingManager.qml中定义a作为别名属性，如下所示：

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 并将组件保持在范围内

Refactoring QML and keeping components in scope

qt

qml

qtquick2