CODEWITHSUNDEEP
qtqmlqt5qt-design-studio
naezith
naezith

Reputation: 671

Incorrect Editor View for QML in Qt Design Studio

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.

Editor view does not match

Is there an elegant solution for this?

Upvotes: 0

Views: 800

Answers (1)

Aleksei German
Aleksei German

Reputation: 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
            }
        }
    }
}

Upvotes: 0

Related Questions