Qml ListView 重叠

Question

我的 qml 文件中有这个 ListView

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


                }

我使用这个函数向它添加元素，我基本上接受输入，运行一些报废获取链接和标题 bla bla bla 并使用信号将其发送回。我想也许问题出在添加它们的方式上？

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

它工作得很好（添加元素部分）但是所有项目都重叠导致这个 mess

提前致谢

Answer 1

您的委托项目没有宽度。由于这是一个水平列表视图，因此您的代理的宽度为 0，它们被放置在彼此的顶部。

最简单的例子是：

delegate: Item {
  height: 50
  width: 100

  Column {
    ...
  }
}