RowをMouseAreaでカバーする方法は？

Question

MouseAreaが私の例ではitem_rowのコンポーネント全体をカバーしていないのはなぜですか？もしそうなら、Paneはマウスをその上に置くと赤くなります。私はMouseAreaが全体をカバーするようにしたいので、青い四角またはラベルの上にマウスを置くと、ペイン全体が赤くなりますが、今は空のスペースでしか動作しません。私はどうすればいいのですか？

これはコードであり、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

とが自動的に互いに隣接して（その{ }内で宣言全てItem Sである）すべての子を配置します実行。

MouseAreaにはの全員を含めるには、とMouseAreaの兄弟を作成します。

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