QML custom Item not working with QQmlApplicationEngine

Fheanor

I made a accordion in QML and when I try to use it in a QML project, it works fine.

But I need to integrate it in a QWidget project, so I try to use a QQmlApplicationEngine to display it. But when I do this, nothing work, just name of the items are printed in the window

Here are my files:

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');
						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

And this is how I use QQmlApplicationEngine

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

    QQmlApplicationEngine engine("main.qml");
    
    return a.exec();
}

Does anyone know why ?

Thanks a lot !

sierdzio

When using QQmlApplicationEngine, you should put ApplicationWindow as your topmost component in main.qml.

Fheanor

@sierdzio said in QML custom Item not working with QQmlApplicationEngine:

When using QQmlApplicationEngine, you should put ApplicationWindow as your topmost component in main.qml.

Hello,
I already tried that and it is still not working :(