Incorrect Editor View for QML in Qt Design Studio

Question

This is Qt Design Studio, not Qt Quick Designer but it might be the same.

I made a component,

PaneWithTitle.qml

Column {
    id: column
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    spacing: Style.paneTitleOffset

    property string title
    property alias inside: inner_space.sourceComponent

    DefaultText {
        text: qsTr(title)
    }

    Pane {
        id: pane

        background: Rectangle {
            color: "#283547"
            radius: Style.rectangleCornerRadius
        }

        Loader {
            id: inner_space
        }
    }
}

And I'm using it like this:

PaneWithTitle {
    title: "Recovery"
    inside: ColumnLayout {
        id: rows

        TextFieldWithTitle {
            id: seed_input
            title: qsTr("Seed")
        }

        TextFieldWithTitle {
            id: password_input
            title: qsTr("Password")
        }

        RowLayout {
            id: columns

            Button {
                id: back_button
                text: qsTr("Back")
            }

            Button {
                id: confirm_button
                text: qsTr("Confirm")
            }
        }
    }
}

When I run it, it looks fine in Live Preview. But inside the editor, size of the pane background is being 0.

Is there an elegant solution for this?

Answer 1

It's hard to find an absolute fix for that, looks like there is a bug in Form Editor items hierarchy, but you can at least slightly improve how it's shown. If you can, please also submit your issue as a QDS bug report.

You can remove Loader, replace Loader.sourceComponent with pane.contentItem and wrap PaneWithTitle.qml content with Item. Code will look like that:

Item {
    id: root
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

    property string title
    property alias inside: pane.contentItem

    Column {
        id: column
        anchors.fill: parent
        spacing: Style.paneTitleOffset

        Text {
            text: qsTr(title)
        }

        Pane {
            id: pane

            background: Rectangle {
                color: "#283547"
                radius: Style.rectangleCornerRadius
            }
        }
    }
}