为什么添加带有 anchors.fill: parent 的 MouseArea 会导致行堆叠在一起？

Question

鉴于此 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 和 anchors.fill: parent 会导致行相互堆叠？如何取回添加 MouseArea 之前的自动垂直间距？我已经尝试将 Row 放在 Rectangle 和 Component.

中

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

Answer 1

项目堆叠的原因很简单：它们的高度未设置。代表必须始终设置身高。由于您没有指定一个，委托高度为零并且封闭文本呈现在相同的 y（零）上，堆叠起来。

然而，这不是这里唯一的问题。您定义了要锚定的 MouseArea。 Rows 以及 Columns，强制对自身内部的项目进行特定排列。添加锚点会干扰这种自动机制。 docs也清楚这一点。你可以阅读那个...

Row is a type that positions its child items along a single row. It can be used as a convenient way to horizontally position a series of items without using anchors.

...还有那个...

[...]since a Row automatically positions its children horizontally, a child item within a Row should not set its x position or horizontally anchor itself using the left, right, anchors.horizontalCenter, fill or centerIn anchors.

锚定错误可能会产生不一致的状态，因此 Row 不会像没有锚定项那样从封闭文本继承高度。这反过来导致零高度和堆叠。

在这种特殊情况下，您可以将 Row 包含在 Item 中，并对后者应用填充 MouseArea。生成的代码 还正确设置了委托高度和宽度 ，看起来类似于以下内容（请注意，我已经删除了代码中的角色和模型，因为后者不可用在提供的代码片段中）：

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

为什么添加带有 anchors.fill: parent 的 MouseArea 会导致行堆叠在一起？

Why does adding a MouseArea with anchors.fill: parent cause the rows to stack up on one another?

qml