Qt 如何在qml中添加另一个组件作为参数的新组件

我想做的是在组件内创建一个新对象，这可以通过qml的

组件

组件来完成，但作为参数，我想传递另一个组件，它将位于不同的

.qml

文件中

我要说明我想做什么。 我有一个选项卡栏手风琴组件，我已经完成了：

当我点击按钮时，我想创建一个新的选项卡，它将有自己的内容

我在下面提供了我使用过的代码：

import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3

ApplicationWindow {
    visible: true
    width: 640
    height: 500
    title: qsTr("Tabbars")
    Button{
        id: button
        text: "add new tab dinamically"
        onClicked: item.createPanelItem()
        anchors.top:parent.top
        anchors.left:parent.left
        height: 20
        width: parent.width
    }
    Item{
        id:item
        //anchors.fill:parent
        anchors.top: button.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
            ScrollView{
                anchors.fill:parent
                Column {
                    id: column
                    width:item.width
                    property int currentItem: 0
                    PanelItem {
                        id:panel1
                        index:0
                        title: "Panel 1"
                        width:parent.width
                        content: Item {
                            property string title: "teste"
                            height: configContent.implicitHeight
                            width: configContent.implicitWidth
                            ColumnLayout{
                                id:configContent
                                anchors.topMargin: 10
                                anchors.bottomMargin: 10
                                anchors.fill:parent
                                TextField {
                                    id: companyNameText1
                                    placeholderText: qsTr("Company name")
                                    Layout.fillWidth: true
                                    selectByMouse: true
                                }
                                ComboBox {
                                    id: languagesComboBox1
                                    textRole: "text"
                                    objectName: "language"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        ListElement {text: QT_TR_NOOP("English"); oid: 0}
                                        ListElement {text: QT_TR_NOOP("Portuguese"); oid: 1}
                                        ListElement {text: QT_TR_NOOP("Spanish"); oid: 2}
                                        ListElement {text: QT_TR_NOOP("Italian"); oid: 3}
                                        ListElement {text: QT_TR_NOOP("French"); oid: 4}
                                        ListElement {text: QT_TR_NOOP("Portuguese(Brasil)"); oid: 5}
                                    }
                                }
                                ComboBox {
                                    id: devSndrModeComboBox1
                                    textRole: "text"
                                    objectName: "test_dev_sndr_mode"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        Component.onCompleted: {
                                            append({ text: QT_TR_NOOP("None"), oid: 0 })
                                            append({ text: QT_TR_NOOP("Subpanel"), oid: 1 })
                                            append({ text: QT_TR_NOOP("All"), oid: 2 })
                                        }
                                    }
                                }
                            }
                        }
//                        onResetOtherPanels: function(indexClicked){
//                            if()
//                        }
                    }
                    PanelItem {
                        id:panel2
                        index:1
                        title: "Panel 2"
                        width:parent.width
                        content: Item {
                            property string title: "teste"
                            height: configContent2.implicitHeight
                            width: configContent2.implicitWidth
                            ColumnLayout{
                                id:configContent2
                                anchors.fill:parent
                                ComboBox {
                                    id: sndrModeComboBox1
                                    textRole: "text"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        Component.onCompleted: {
                                            append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                            append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                        }
                                    }
                                }
                            }
                        }
                        Component.onCompleted: {
                            //resetOtherAccordions.connect(panel1.resetHeight)
                            console.log("panel 2 height "+panel2.height)
                        }
                    }
                    PanelItem {
                        id:panel3
                        index:2
                        title: "Panel 3"
                        width:parent.width
                        content: Item {
                            property string title: "teste"
                            height: configContent3.implicitHeight
                            width: configContent3.implicitWidth
                            ColumnLayout{
                                id:configContent3
                                anchors.fill:parent
                                ComboBox {
                                    id: sndrModeComboBox2
                                    textRole: "text"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        Component.onCompleted: {
                                            append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                            append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                        }
                                    }
                                }
                            }
                        }
                        Component.onCompleted: {
                            console.log("panel 3 height "+panel2.height)
                        }
                    }
                }
            }
            function createPanelItem(){
                panelItem.createObject(column,{title:qsTr("newTest"),index:4 /*,content: Item{}*/  })
            }
            Component {
                id: panelItem
                PanelItem {
                    title: qsTr("Teste")
                    width: parent.width
                }
            }
        }
}

PanelItem.qml

：

import QtQuick 2.7
import QtQuick.Layouts 1.2

Item {
    id: root
    property Component content
    property string title: "panel"
    property bool isSelected: false
    property int index: 0
    function toggleSelected() {
        root.isSelected = !root.isSelected
        if(root.isSelected){
            parent.currentItem = index
            for(var i = 0;i<parent.children.length;i++)
            {
                if(parent.children[i].index !== parent.currentItem && parent.children[i].isSelected)
                {
                    parent.children[i].toggleSelected()
                }
            }
        }
    }
    clip: true
    height: container.height + bar.height
    Rectangle{
        id: bar
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        height: 30
        color:  root.isSelected ? "#81BEF7" : "#CEECF5"
        Text {
            anchors.fill: parent
            anchors.margins: 10
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            text: root.title
        }
        Text {
            anchors{
                right: parent.right
                top: parent.top
                bottom: parent.bottom
                margins: 10
            }
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
            text: "^"
            rotation: root.isSelected ? "180" : 0
        }
        MouseArea {
            id:panelAreaClick
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: function(){
                toggleSelected()
            }
        }
    }
    Rectangle{
        id: container
        anchors.top: bar.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        height: loader.item && isSelected ? loader.item.height : 0
        Loader {
            id: loader
            visible: isSelected
            sourceComponent: content
            anchors.top: container.top
        }
        Behavior on height {
            PropertyAnimation { duration: 1000 }

        }
    }
}

---

但这不是我想要做的，因为我将在一个文件上创建一个组件，类似于

panellog.qml

，这就是我想要传递给将要创建的新选项卡的

content

参数的内容。

在内联组件中简单地指定：

        Component {
            id: panelItem
            PanelItem {
                title: qsTr("Teste")
                width: parent.width
                content: Item {}
            }
        }

或者，您可以将

content

的类型设置为

Component

，这样您就可以将其他一些内联组件传递给它，这。。。事实上几乎是一样的。这可能看起来有点费劲，但实际上以一种让您能够访问当前组件范围的方式来定制内容是非常方便的

这里的问题是Qt有一个双向限制，这有点阻碍：

• 不能在命令式（JS）代码中使用声明性组件语法
• 不能以声明方式实例化内联组件

这意味着：

• 如果你想引用一个声明性对象，你必须使用它的id或属性——它只能使用标识符，不能使用对象文本/实例

• 如果要以贴花方式创建对象，它必须位于专用的qml文件中

---

谢谢您的回答。是

PanelItem中的
content
属性。qml

属于

组件类型。我已经在帖子中添加了代码。你是说我先创建对象，然后通过id添加对象？是的，但对象必须是
组件
，在这种情况下，从几乎任何对象到组件的隐式转换都不会启动。您必须在实际的
组件
实例中包装需要创建的任何内容。
        Component {
            id: panelItem
            PanelItem {
                title: qsTr("Teste")
                width: parent.width
                content: Item {}
            }
        }