Qml ListView overlap-CodePudding

I have this ListView in my qml file

ListView {
                    id: listView
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom

                    anchors.topMargin: 100
                    anchors.bottomMargin: 20
                    anchors.rightMargin: 20
                    anchors.leftMargin: 20


                    layoutDirection: Qt.LeftToRight
                    snapMode: ListView.SnapToItem
                    orientation: ListView.Horizontal
                    clip: true

                    model: ListModel
                    {
                        id: listmodel1
                    }

                    delegate: Item {
                        height: 50
                        Column {

                            Image {
                                source: link
                                sourceSize.height: 300
                                sourceSize.width: 100
                                fillMode: Image.PreserveAspectCrop
                            }


                            Text {
                                x: 5
                                color: 'white'
                                text: name
                                font.bold: true
                                anchors.horizontalCenter: parent.horizontalCenter
                                wrapMode: Text.WordWrap
                            }

                            spacing: 5
                        }
                    }


                }

I add elements to it using this function, I basically take input, run some scrapping get links and titles bla bla bla and send it back using signals. I thought maybe the problem was the way of adding them?

function onSetName(name,link)
    {
        console.log(link)
        var data={'name' : name ,'link': link}
        listView.model.append(data)
    }

It's working good (the adding element part) but all the items overlap leading to this mess

Thanks in advance

CodePudding user response：

Your delegate Item does not have a width. Since this is a Horizontal list view an your delegate's width is 0 they are placed on top of each other.

The simplest example would be:

delegate: Item {
  height: 50
  width: 100

  Column {
    ...
  }
}