ListView dynamic anchoring

Question

Let us suppose I have a card made using Rectangle and I want to show buttons on top of it when clicked. I'm calling showMenu() function to do that and for buttons I'm using an ListView with dynamic ListModel. The problem with such is that the button gets added bellow the Rectangle instead of the top of it. The anchor is not updating after appending an item to the model. Here is my code

Item {
    width: 120
    height: 120
    Rectangle {
        id: card
        width: 50
        height: 100
        color: "pink"
        anchors.bottom: parent.bottom
        Item {
            id: rec
            width: 50
            anchors.bottom: parent.top    // This anchor is not updating after appending an item to the list.

            ListModel {
                id: menuListModel
            }

            Component {
                id: delegate
                Rectangle {
                    width: 120
                    height: 20
                    color: "blue"
                    Text {
                        anchors.fill: parent
                        anchors.centerIn: parent
                        text: commandText
                    }
                }
            }

            ListView {
                anchors.fill: parent
                model:menuListModel
                delegate: delegate
                interactive: false
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: menuListModel.append({"commandText" : "Normal Summon"});
        }
    }
}

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

This is more or less a duplicate of this question. The Item needs a height. As mentioned in the answer to that question, you can add debug statements to the code when things like this happen. In this situation, you can also add a Rectangle as a child of the Item and make sure that it's visible:

Rectangle {
    anchors.fill: parent
    color: "transparent"
    border.color: "darkorange"
}

If it's not visible, you know that the problem lies with that (parent) item.

edited May 23 '17 at 12:22

Community

1
1

answered Jul 27 '16 at 16:50

Mitch

23,716
9
83
122

Adding height would solve the current example, but in my code the height is dynamic, so should I keep on updating the height each time an object is appended to the model ? Or is there any way the height of the `ListView` is updated from the top of it instead from the bottom ? – Vedanshu Jul 29 '16 at 09:42
So the height of the item depends on the height of the `ListView`? – Mitch Jul 29 '16 at 11:38
Yes height of the `Item` depends on the height of the `ListView`. – Vedanshu Jul 29 '16 at 11:43
And the height of the `ListView` depends on the height of the `Item`. :p So, you need to give the `Item` a `height`. – Mitch Jul 29 '16 at 12:43
If I add `rec.height += 10;` in `onClicked` before appending object the model, it's working correctly. But shouldn't the height be updated automatically. – Vedanshu Aug 04 '16 at 04:07

ListView dynamic anchoring

1 Answers1