creator - qt install

¿Cómo incluir eventos de desplazamiento del mouse secundario en el MouseArea principal utilizando QML?

Question

Quiero implementar el siguiente escenario en QML.

Aquí hay una muestra / delegado simplificado para el elemento ListView :

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

Pero tengo un problema con MouseArea .
Inner MouseArea (actionButton) no funciona correctamente para el evento entered . Cuando el mouse ingresa en el botón de acción, MouseArea externo dispara el evento exited .

¿Hay algún error en mi código? De manera más general, ¿cómo puedo implementar tal escenario en QML?

Answer 1

He intentado algunas cosas, pero no parece posible MouseArea simultáneamente sobre dos MouseArea . Los preventStealing y propagateComposedEvents parecen funcionar solo cuando tienes un evento de clic. Pero desde el MouseArea interno puede activar la señal entered() del otro. Algo como esto:

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

El problema es que la señal de exited() del MouseArea contiene se llamará antes de volver a llamar al entered() . Por lo tanto, es posible que deba "retrasar" el cambio de estado en exited() solo para asegurarse de que realmente desea ocultar sus botones de acción. Otra solución sería guardar la posición actual del mouse y ocultar los botones SÓLO si se llama a exited() con el mouse en uno de sus bordes.

Answer 2

Me encontré con este mismo problema y encontré la respuesta en la documentación de MouseArea 5.0 para MouseArea . La respuesta a esto es en realidad bastante simple.

Si desea incluir eventos de MouseArea mouse secundario en su MouseArea principal, convierta a su MouseArea secundario en un hijo del MouseArea principal:

MouseArea {
    id: parent

    MouseArea {
        id: child
    }
}

Dado que tengo un tipo de Widget personalizado que se usaría como vista principal, terminé con la propiedad default como hijos de MouseArea :

Item {
    default property alias children: mouseArea.data

    MouseArea {
        id: mouseArea
    }
}

Answer 3

Prueba esto:

• agregar una señal al área interna que se emite en el mouse ingrese.
• Conecte la señal al área exterior.
• La señal hace que el área exterior entre en el estado suspendido.

La salida del ratón en ambos todavía cancelará el estado de activación. Cuando mueva el mouse fuera de los controles, debería funcionar correctamente sin ningún código adicional

Answer 4

haga estados para cada estado de los elementos en la Vista, entonces puede usar cosas como if declaraciones o declaraciones de casos para cambiar estas propiedades. En otras palabras, trate de no configurar sus elementos para que funcionen en MouseArea sino en propiedades Y establezca las propiedades de Elementos en trabajar en las propiedades del conjunto espero que esto ayude, si no aquí, es un ejemplo:

EDITAR He añadido el color para ser transparente. Si no hay ratón lo que nunca. Si estuviera usando una imagen, usaría la opacidad y luego agregaría también un montón de comportamientos. Pero esto es un trabajo.

ejemplo

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