QML: How to dynamically add Row

Question

I have a simple qml file that creates my qml component as shown below. I need to load different controls components in the control_section.

Here are the different control cases I need to support

A single button
Two buttons with a horizontally layout (Row)
Two Text box and one button with a vertical layout (Row)

The first case works with just one button. However in the second case only the last button shows up. How can I get both buttons in the Row to display?

Note: The issue seems to be that the buttons are overlapping each other

Frame.qml

Item {
    id: frame
    width: 400
    height: 500
    property alias components: control_section.sourceComponent
    Loader  {...}
    Image {...}
    Text {...}
    Loader{
        id: control_section
        ...
    }
}

OtherButton.qml

Item { ..; Button {...};}

main.qml

Frame {
    components: Row {
        OtherButton {}
        OtherButton {}
    }
}

IIRC Row doesn't really support dynamic content, it is a static construct. You either have to for something that supports it like say list models or implement it yourself. — dtech
@ddriver I am just starting to explore the ListModel option. — andre

andre andre · Accepted Answer · 2014-10-17T14:06:42

I resolved this issue by using a ListView. This has the buttons displaying correctly.

ListModel {
    id: listModel
    ListElement {text: "A"; next: "first.qml"}
    ListElement {text: "B"; next: "second.qml"}
}

Component {
    id: listDelegate
    Item {
       OtherButton  {}
    }
}

ListView {
    model : listModel
    delegate: listDelegate
}

QML: How to dynamically add Row

1 Answers