0

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

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 !

Ed Nio
  • 593
  • 2
  • 11
  • 27
  • What exactly happens when you say *nothing work*? And btw if you want to combine QWidget and QML you should use [QQuickWidget](http://doc.qt.io/qt-5/qquickwidget.html), not `QQmlApplicationEngine`. – folibis Apr 06 '17 at 09:35
  • It is a accordion item. So it works like [that](https://en.wikipedia.org/wiki/Accordion_(GUI)). But if I use `QQmlApplicationEngine` , I will only see white rectangles with the name of the rectangle. But no feature of my accordion will work (for example, drag and drop feature etc...). – Ed Nio Apr 06 '17 at 09:52
  • I already tried with `QQuickWidget`, but this error is displayed : `QQuickWidget only supports loading of root objects that derive from QQuickItem. If your example is using QML 2, (such as qmlscene) and the .qml file you loaded has 'import QtQuick 1.0' or 'import Qt 4.7', this error will occur. To load files with 'import QtQuick 1.0' or 'import Qt 4.7', use the QDeclarativeView class in the Qt Quick 1 module.` – Ed Nio Apr 06 '17 at 09:56
  • It make no sence because I am not using `QtQuick 1.0` or `Qt 4.7` – Ed Nio Apr 06 '17 at 09:57
  • Sure, you just should replace root `Window` with `Item`. `Window` isn't `QQuickItem` inheritor – folibis Apr 06 '17 at 10:44
  • 1
    As for your problem, you doesn't define size of your PanelItem 's root item. `width` isn't defined at all so it's 0. height should be defined or using `height` property or using `Layout.fillHeight`, not both of them. But in your case `Layout.fillHeight` unnecessarily just because the item not inside a Layout. So just define size of the root item and your problem will be solved. – folibis Apr 06 '17 at 10:57
  • Thanks, I solved it by using QQuickWidget and using Item as root. Have a good day ! – Ed Nio Apr 06 '17 at 11:49
  • Can you formulate an answer yourself and accept is as correct? Other people with the same problem may benefit from it. – m7913d Apr 08 '17 at 13:39
  • Of course. I am currently not at work but I will update it during the week. – Ed Nio Apr 10 '17 at 06:56

0 Answers0