Question

为什么MouseArea不涵盖我示例中的整个item_row组件？如果确实如此，那么当鼠标放在它上面时Pane会变红。我希望MouseArea覆盖整个Row，因此当我将鼠标放在蓝色方块或标签上时，整个窗格变为红色，但是现在它仅适用于空白区域。我该怎么办？

这是代码，使用qmlscene

运行

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 680
    title: qsTr("Hello World")

    StackView {
        anchors.fill: parent
        Pane {
            id: item_pane
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            contentHeight: parent.height
            Row {
                id: item_row
                Rectangle  {
                    color: "blue"
                    antialiasing: true
                    width: 150
                    height: 150
                }
                Pane {
                    background: Rectangle {
                        color: "transparent"
                    }
                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                    ColumnLayout {
                        Label {
                            text: "Some data"
                            Layout.alignment: Qt.AlignHCenter
                            font.bold: true
                        }
                        Grid {
                            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                            columns: 2
                            rows: 3
                            Label {
                                text: "Field1:"
                                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                            }
                            Label {
                                text: "1 sec"
                                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                            }
                            Label {
                                text: "Field 2"
                            }
                            Label {
                                text: "30 kg"
                            }
                            Label {
                                text: "Field 3"
                            }
                            Label {
                                text: "30 years"
                            }
                        }
                    }
                }
                MouseArea {
                    id: mouse_area
                    hoverEnabled: true
                    //anchors.fill: parent
                    onEntered: {
                        item_pane.background.color="red"
                    }
                    onExited: {
                       item_pane.background.color="#ffffff"
                    }
                }
                Component.onCompleted: {
                    mouse_area.x=item_row.x
                    mouse_area.y=item_row.y
                    mouse_area.width=item_row.width
                    mouse_area.height=item_row.height
                    console.log("x="+item_row.x+",y="+item_row.y+"width=" + item_row.width +",height="+item_row.height)
                }
            }
        }
    }
}

Answer 1

Row会自动将所有孩子（在Item内声明的所有{ }）放在彼此旁边。

要MouseArea覆盖整个Row，请制作Row和MouseArea兄弟姐妹。

Row {
    id: myRow
    Rectangle {
        [...]
    }
    [...]
}
MouseArea {
    anchors.fill: myRow
    [...]
}

如何用MouseArea覆盖Row？

1 个答案: