QML自定义项不能与QQmlApplicationEngine一起使用

Question

我用QML制作了手风琴，当我尝试在QML项目中使用它时，它运行正常。

但是我需要将它集成到QWidget项目中，所以我尝试使用 QQmlApplicationEngine 来显示它。但是当我这样做时，没有任何作用，只是在窗口中打印了项目的名称

以下是我的文件：

import QtQuick 2.4
import QtQuick.Layouts 1.0

Item {
    default property var contentItem: null
    property string title: "panel"
    id: root
    height: 30
    Layout.fillHeight: current
    property bool current: false
    ColumnLayout {

        anchors.fill: parent
        spacing: 0
        Rectangle {
            Drag.active: dragArea.drag.active
            id: bar
            Layout.fillWidth: true
            height: 30
            color:  root.current ? "#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.current ? "180" : 0
            }
            MouseArea {
                id: dragArea
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                drag.axis: Drag.YAxis

                drag.target: root

                onReleased: {
                    console.log("release !")
                    root.Drag.drop()
                }
                onClicked: {


                    if (root.parent.current !== root) {
                        console.log('test');
                       // if( (root.parent.currentItem !== null) )
                         // root.parent.currentItem.current = false;
                        root.current = !root.current;

                        root.parent.currentItem = root;
                        if(current) {
                            root.height = 300
                        }
                        else {
                            root.height = 30
                        }
                    }

                }
            }
        }
        Rectangle {
            id: container
            Layout.fillWidth: true
            anchors.top: bar.bottom
            implicitHeight: root.height - bar.height
            clip: true
            Behavior on implicitHeight {
                PropertyAnimation { duration: 100 }
            }
        }
        Component.onCompleted: {
            if(root.contentItem !== null)
               root.contentItem.parent = container;
        }
    }
}

PanelItem.qml

Window {
    visible: true
    width: 400; height: 400

    ObjectModel {
        id: itemModel
        PanelItem {
            title: "Panel 1"
                Rectangle {
                    color: "orange"
                    anchors.fill: parent
                }
        }
        PanelItem {
             title: "Panel 2"
             Rectangle {
                color: "orange"
                 anchors.fill: parent
             }
        }
        PanelItem {
             title: "Panel 2"
             Rectangle {
                color: "orange"
                 anchors.fill: parent
             }
        }

        PanelItem {
             title: "Panel 2"
             Rectangle {
                color: "orange"
                 anchors.fill: parent
             }
        }
        PanelItem {
             title: "Panel 2"
             Rectangle {
                color: "orange"
                 anchors.fill: parent
             }
        }

    }

    ListView {
        id: my_list
        anchors.fill: parent
        model: itemModel
    }
}

main.qml

这就是我使用 QQmlApplicationEngine

的方法

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QQmlApplicationEngine engine("main.qml");

    return a.exec();
}

有谁知道为什么？

非常感谢！