QML ListView 数据项被覆盖新手

编程问答 2022-05-30

问题描述

问题：

  1. 我遗漏了什么——显示项目应该在不同的行上？
  2. 为什么下面的两个 delgate 用法会给出不同的结果？
  3. 我应该阅读什么来理解这一点？

谢谢。

import QtQuick 2.15

import QtQuick.Layouts 1.15

import QtQuick.Window 2.15

Window {

    width: 640
    height: 480
    visible: true
    title: qsTr("ListView Overwrite")

    ListModel {
        id: dataSource_1
        ListElement { name: "rock" }
        ListElement { name: "paper" }
        ListElement { name: "scissors" }
    }

    Component {
        id: delegateItem
        Item {
            Text { text: name }
        }
    }

    ListView {
        model: dataSource_1
        //delegate: Text { text: name } // only "rock" displayed
        delegate: delegateItem  // rock,paper,scissors displayed,overwritten
    }
}

解决方法

可以在 Item.implicitHeight 的文档中找到对您的问题的很好的解释：

大多数项目的默认隐式大小为 0x0，但有些项目具有无法覆盖的固有隐式大小，例如图像和文本。

您没有为 ListView 指定大小，因此它当前的隐含大小为 0x0。

这意味着纸/剪刀代表被视为在视图之外并且不会被渲染。

例如，要么为 ListView 指定一个明确的高度，要么简单地指定 anchors.fill: parent。

对于使用基于“组件”的解决方案相互堆叠的代表来说，这是同样的问题。这里的问题是 Text 包裹在没有指定大小的 Item 周围，因此每个委托的隐式高度等于 0。移除 Item 包装器，您的文本将被正确定位，因为 Text 具有固有的 implicitHeight。

delegateslistviewlistviewmodelmodelmodelqmlqmlqml