Làm thế nào để bao gồm các sự kiện di chuột con trong MouseArea cha mẹ bằng cách sử dụng QML?

Question

Tôi muốn triển khai kịch bản sau đây trong QML.

Đây là một mẫu/đơn giản hóa đại biểu cho ListView yếu tố:

Component { 
    Item { 
     id: container 
     MouseArea { 
     anchors.fill: parent 
     hoverEnabled: true 

     onClicked: { 
      container.ListView.view.currentIndex = index 
      container.forceActiveFocus(); 
     } 
     onEntered: { 
      actionList.state = "SHOW"; 
      myItem.state = "HOVER" 
     } 
     onExited: { 
      actionList.state = "HIDE"; 
      myItem.state = "NORMAL" 
     } 
     Rectangle { 
      id: myItem 
      color: "gray" 
      anchors.fill: parent 
      Row { 
       id: actionList 
       spacing: 5; anchors.fill: parent 
       Image { 
        id: helpAction 
        source: "" //Some image address 
        width: 16; height: 16; fillMode: Image.PreserveAspectFit 
        states: [ 
         State { 
          name: "NORMAL" 
          PropertyChanges { target: helpAction; opacity: 0.7 } 
         }, 
         State { 
          name: "HOVER" 
          PropertyChanges { target: helpAction; opacity: 1.0 } 
         } 
        ] 
        MouseArea { 
         hoverEnabled: true 
         anchors.fill: parent 

         onEntered: { 
          parent.state = "HOVER"; 
         } 
         onExited: { 
          parent.state = "NORMAL"; 
         } 
        } 
        states: [ 
         State { 
          name: "SHOW" 
          PropertyChanges { target: actionList; visible: false } 
         }, 
         State { 
          name: "HIDE" 
          PropertyChanges { target: actionList; visible: true } 
         } 
        ] 
       } 

       //Other action buttons... 

       states: [ 
        // `NORMAL` and `HOVER` states definition here... 
       ] 
      } 
     } 
    } 
} 

Nhưng tôi có một vấn đề với MouseArea.
Bên trong MouseArea (nút hành động) không hoạt động bình thường cho sự kiện entered. Khi chuột vào nút hành động, bên ngoài MouseArea cháy exited sự kiện.

Có lỗi trong mã của tôi không? Nói chung, làm thế nào tôi có thể thực hiện một kịch bản như vậy trong QML?

Answer 1

tôi đã phải đối mặt bởi sự cố này giống nhau, và tình cờ gặp câu trả lời trong QtQuick 5.0 documentation for MouseArea . Câu trả lời cho điều này thực sự khá đơn giản.

Nếu bạn muốn bao gồm các sự kiện chuột con di chuột trong cha mẹ của bạn MouseArea, làm cho bạn trẻ MouseArea một đứa trẻ của phụ huynh MouseArea:

MouseArea { 
    id: parent 

    MouseArea { 
     id: child 
    } 
} 

Kể từ khi tôi có một tùy chỉnh Widget kiểu đó sẽ được sử dụng như phụ huynh xem, tôi đã kết thúc với thuộc tính default là con của MouseArea:

Item { 
    default property alias children: mouseArea.data 

    MouseArea { 
     id: mouseArea 
    } 
} 

Answer 2

Iv'e đã ​​thử một vài điều nhưng có vẻ như không thể di chuột qua hai MouseArea cùng một lúc. preventStealing và propagateComposedEvents dường như chỉ hoạt động khi bạn có sự kiện nhấp chuột. Nhưng từ bên trong MouseArea bạn có thể kích hoạt tín hiệu entered() của tín hiệu kia. Một cái gì đó như thế này:

import QtQuick 2.1 

Rectangle { 
    width: 500 
    height: 500 

    Rectangle { 
     width:300 
     height: 300 
     color: "red" 

     MouseArea { 
      id: big 
      anchors.fill: parent 
      hoverEnabled:true 
      onEntered: { 
       console.log("ENTERED BIG mousearea"); 
      } 
      onExited: { 
       console.log("EXITED BIG mousearea"); 
      } 
     } 

     Rectangle { 
      anchors.centerIn: parent 
      height: 100 
      width: 100 
      color: "green" 

      MouseArea { 
       anchors.fill: parent 
       hoverEnabled:true 
       onEntered: { 
        console.log("ENTERED small mousearea"); 
        big.entered(); 
       } 
       onExited: { 
        console.log("EXITED small mousearea"); 
        big.exited(); 
       } 
      } 
     } 
    } 
} 

Vấn đề là các exited() tín hiệu từ chứa MouseArea sẽ được gọi trước khi gọi các entered() trở lại. Vì vậy, bạn có thể cần phải "trì hoãn" thay đổi trạng thái trong exited() chỉ để đảm bảo bạn thực sự muốn ẩn các nút tác vụ của mình. Một giải pháp khác là lưu vị trí chuột hiện tại và ẩn các nút CHỈ nếu exited() được gọi bằng chuột ở một trong các đường viền của nó.

Answer 3

Hãy thử điều này:

• thêm một tín hiệu tới khu vực bên trong đó là phát ra trên chuột nhập.
• Kết nối tín hiệu với khu vực bên ngoài.
• Tín hiệu làm cho khu vực bên ngoài vào trạng thái di chuột.

Thoát chuột trên cả hai vẫn sẽ hủy trạng thái di chuột. Khi bạn di chuyển chuột ra khỏi các điều khiển, nó sẽ hoạt động chính xác mà không cần thêm bất kỳ mã nào

Answer 4

tạo trạng thái cho từng trạng thái của các phần tử trong dạng xem, sau đó bạn có thể sử dụng các câu lệnh như báo cáo hoặc trường hợp để thay đổi các thuộc tính này. Cố gắng không để thiết lập các yếu tố của bạn lên để làm việc trên MouseArea nhưng trên tài sản Và thiết lập các thuộc tính Elements để làm việc trên các thuộc tính thiết lập Tôi hy vọng rằng điều này sẽ giúp nếu không ở đây là ví dụ:

EDIT Tôi đã thêm màu sắc để minh bạch . nếu không có con chuột như vậy bao giờ hết. Nếu tôi đã sử dụng một hình ảnh tôi sẽ sử dụng opacity sau đó thêm một loạt các hành vi cũng Nhưng đây là một công tác

dụ

import QtQuick 2.0 
Rectangle { 
    width: 360 
    height: 360 
    property string state1:"OutMouse" 
    property string state2: "OutMouse" 
    property string state3: "OutMouse" 
    property string state4: "OutMouse" 
    Rectangle{ 
     id:blueRec 
     width: parent.width 
     height: parent.height/6 
     color: state1 === "InMouse" ? "blue" : "green" 
     MouseArea{ 
      anchors.fill: blueRec 
      hoverEnabled: true 
      onEntered: state1 = "InMouse" 
      onExited: { 
       if (state1 === state2 || state3 || state4){ 
        state1 = "InMouse" 
       } 
       if(state1 !== state2 || state3 || state4) 
       { 
        state1 = "OutMouse" 
       } 
      } 
     } 
     Text { 
      text: state1=== "InMouse"? qsTr("foo") :"bar" 
      anchors.centerIn: blueRec 
     } 
     Row{ 
      width: parent.width 
      height: parent.height/4 

      spacing: 2 
      anchors{ 
       left: parent.left 
       verticalCenter: blueRec.verticalCenter 
       leftMargin: blueRec.width/12 
      } 
      Rectangle{ 
       id: rec1 
       height: parent.height; 
       width: height 
       color: { 
        if (state3 === "InMouse") 
         return "gray" 
        if (state1 === "OutMouse") 
         return "transparent" 
        else 
         return "white"} 
       MouseArea{ 
        id: rec1M 
        anchors.fill: parent 
        hoverEnabled: true 
        onEntered:{ 
         state1 = "InMouse" 
         state2 = "InMouse" 
        } 
        onExited: state2 = "OutMouse" 
       } 
      } 

      Rectangle{ 
       id: rec2 
       height: parent.height ; 
       width: height 
       color: { 
        if (state3 === "InMouse") 
         return "gray" 
        if (state1 === "OutMouse") 
         return "transparent" 
        else 
         return "white" 
       } 
       MouseArea{ 
        id: rec2M 
        anchors.fill: parent 
        hoverEnabled: true 
        onEntered:{ 
         state1 = "InMouse" 
         state3 = "InMouse" 
        } 
        onExited: state3 = "OutMouse" 
       } 
      } 

      Rectangle{ 
       id: rec3 
       height: parent.height; 
       width: height 
       color:{ 
        if (state4 === "InMouse") 
         return "gray" 
        if (state1 === "OutMouse") 
         return "transparent" 
        else 
         return "white" 
       } 
       MouseArea{ 
        id: rec3M 
        anchors.fill: parent 
        hoverEnabled: true 
        onEntered:{ 
         state4 = "InMouse" 
         state1 = "InMouse" 
        } 
        onExited: state4 = "OutMouse" 
       } 
      } 
     } 
    } 
}