Qml 为什么添加带有anchors.fill:parent的MouseArea会导致行彼此堆叠？

鉴于此

ListView

工作正常：

ListView {
    id: myListView
    model: myListModel
    anchors.fill: parent

    delegate: Row {
        id: row
        spacing: 5
        Text {
            text: id
            width: 25
            horizontalAlignment: Text.AlignHCenter
        }

        Text {
            text: description
        }
    }
}

为什么添加带有锚定点的

MouseArea

会导致行相互堆叠？如何恢复添加

MouseArea

之前的自动垂直间距？我已经尝试将

行

放在

矩形中

以及

组件中

ListView {
    id: myListView
    model: myListModel
    anchors.fill: parent

    delegate: Row {
        MouseArea {
            anchors.fill: parent
            onClicked: myListView.currentIndex = index
        }
        id: row
        spacing: 5

        Text {
            text: id
            width: 25
            horizontalAlignment: Text.AlignHCenter
        }

        Text {
            text: description
        }
    }
}

项目堆叠的原因很简单：它们的高度未设置。代理必须始终设置高度。由于您没有指定一个，代理高度为零，并且所包含的文本在相同的
y
（零）上叠加呈现

然而，这不是这里唯一的问题。您定义了要锚定的
MouseArea
<代码>行

s和列s强制对其内部的项目进行特定安排。添加锚点可与此自动机构相互干扰。 我们也很清楚这一点。你可以读到

Row是一种沿单行放置其子项的类型。它可以作为一种方便的方式，在不使用锚的情况下水平定位一系列项目

……而且

[…]由于行自动水平定位其子行，因此 一行内的子项不应设置其x位置或水平位置 使用左，右锚定自身。水平中心，填充或 centerIn锚定

锚定错误可能会生成不一致的状态，使得

行

不会像没有锚定项时那样从封闭文本继承高度。这反过来导致零高度和堆叠

在这种特殊情况下，您可以将

行

包含在

项中

并将填充

鼠标earea

应用于后者。生成的代码，以及正确设置的代理高度和宽度，看起来类似于以下内容（请注意，我已经删除了代码中的角色和模型，因为后者在提供的代码段中不可用）：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2

ApplicationWindow {
    visible:  true
    width: 200
    height: 300
    
    ListView {
        id: myListView
        model: 20
        anchors.fill: parent
        
        delegate: Item {
            width: myListView.width
            height: text1.height            // set the height!
            Row {
                id: row
                anchors.fill: parent
                spacing: 5
                
                Text {
                    id: text1
                    text: "id"
                    width: 25
                    horizontalAlignment: Text.AlignHCenter
                }
                
                Text {
                    text: "description"
                }
                
            }
            MouseArea {                     // fills the delegate Item, not the Row!
                anchors.fill: parent
                onClicked: {
                    myListView.currentIndex = index
                    console.info("Area clicked! Index: " + index)
                }
            }
        }
    }
}