QML GroupBox: Binding loop detected for property “implicitWidth”

Question

I'm trying to load some QML form in QQuickWidget and keep getting: QML GroupBox: Binding loop detected for property "implicitWidth" The simplified QML is:

import QtQuick 2.4
import QtQuick.Controls 1.2

GroupBox {
    id: root
    title: qsTr("1")

    Column {
        id: column1
        width: parent.width

        ComboBox {
            id: cbComboBox
            width: parent.width
            currentIndex: 0
            editable: false
        }

        GroupBox {
            id: groupBox
            title: "test"
            width: parent.width //the problem
            Label {
                text:"1"
                width: parent.width
            }

        }
    }
}

It looks like for some reason I can't use parent.width or cbComboBox.width for groupBox. And root.width works but too wide. What I'm missing? I need nested GroupBox to have maximum width (with spacing).

Answer 1

According to the Qt GroupBox QML Type documentation

The implicit size of the GroupBox is calculated based on the size of its content.

It means the GroupBox will automatically use the size of its children to calculate its own size. In your case, the only child is the Column whose width is equal to the GroupBox width. I think that is what's causing the binding loop.

If you set the width of the Column as said by @eyllanesc, the binding loop will disappear.

I would rather define the implicit width of the GroupBox (the width by default) in the QML part. In my example, the implicit width is 100px but it could be calculated from the widths of the children (ComboBox, other GroupBox,...).

// MyGroupBox.qml
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

GroupBox {
    title: qsTr("1")
    implicitWidth: 100
    Column {
        id: column1
        width: parent.width
        ComboBox {
            id: cbComboBox
            currentIndex: 0
            editable: false
            width: parent.width
        }
        GroupBox {
            id: groupBox
            title: "test"
            width: parent.width
            Label {
                text: "1"
            }
        }
    }
}

And it will possible to set a real width depending on your project directly from the C++ by changing the width of the root object.

// main.cpp
#include <QtQuickWidgets/QQuickWidget>
#include <QQuickItem>
#include <QtWidgets>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QQuickWidget *view = new QQuickWidget;
    view->setSource(QUrl::fromLocalFile("://MyGroupBox.qml"));
    view->rootObject()->setWidth(800);
    view->show();
    return app.exec();
}