QML 在组件中使用 createObject 填充 ColumnLayout答案

【问题标题】：QML fill ColumnLayout with createObject in a ComponentQML 在组件中使用 createObject 填充 ColumnLayout
【发布时间】：2018-08-09 07:36:46
【问题描述】：

我想将组件动态添加到 TabView/Tab 中的 ColumnLayout。但我还没有找到这样做的可能性。问题是我对 createObject 调用的 ColumnLayout 没有正确的父引用。因为 Tab 动态加载了一个组件，所以我将 ColumnLayout 封装在一个组件中。

在 QML 调试器中，我可以解决以下路径：objForm.tabView.tabStatus.tabStatusLoader.colLayout，但我不能将其用作正确的父级。

好像不在范围内。

TypeError: Cannot read property 'tabStatus' of undefined

ObjForm.ui.qml

Item {
    id: item1
    width: 400
    height: 400

    property QtObject object

    property Component compLayout

    TabView {
        id: tabView
        anchors.fill: parent
        Tab {
            id: tabStatus
            title: "status"
            Loader {
                id: tabStatusLoader
                sourceComponent: compLayout
            }
        }
    }
}

ObjForm.qml

ObjectViewForm {
    id: objForm
    anchors.fill: parent
    object: someObj

    compLayout: Component {
        id: layoutComp
        ColumnLayout {
            id: colLayout
            spacing: 2
        }
    }

    onObjectChanged: {
        // Here i want to add the someLabel Component to the ColumnLayout
        someLabel.createObject(*PARENT*)
    }

Component {
    id: someLabel

    Row {
        property string text
        property string label

        spacing: 5

        Label {
            text: parent.label
        }

        Label {
            text: parent.text
        }
    }
}

有谁知道如何解决这个问题或可以提出更好的建议？

【问题讨论】：

标签： qt tabs qml components tabview

【解决方案1】：

好的，我自己找到了解决方案。为了将 ColumnLayout 包含到组件中，我将其拉出并创建了一个别名属性来发布它。有了这个，就可以将对象添加到我的 ColumnLayout。但是 ColumnLayout 得到了错误的 parent(objForm) 而不是 Component。

组件不能是父级，因为需要 QQuickItem* 而不是 QObject*，并且附加不能包含除“id”之外的属性。因此需要一个虚拟项目。

要重新设置 ColumnLayout 的父级，Item 需要一个 Component.onCompleted 函数来设置父级。

ObjectViewForm {
        id: objForm
        anchors.fill: parent
        object: someObj

        property alias componentLayout: colLayout

        compLayout: Component {
            id: layoutComp
            Item {
                id: dummy
                Component.onCompleted:  {
                    colLayout.parent = dummy
                }
            }
        }

        ColumnLayout {
            id: colLayout
            spacing: 2
        }

【讨论】：