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