QMLを使用して親MouseAreaに子マウスホバーイベントを含めるにはどうすればよいですか？
次のシナリオをQMLで実装したいと思います。
これは、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...
]
}
}
}
}
しかし、MouseAreaに問題があります。
内部MouseArea（actionButton）は、enteredイベントに対して正しく機能しません。マウスがアクションボタンに入ると、外側のMouseAreaがexitedイベントを発生させます。
私のコードに間違いはありますか？より一般的には、QMLでそのようなシナリオを実装するにはどうすればよいですか？
私はこれと同じ問題に直面し、 MouseAreaのQtQuick 5.0ドキュメント で答えに出くわしました。これに対する答えは実際には非常に簡単です。
親MouseAreaに子マウスホバーイベントを含めたい場合は、子MouseAreaを親MouseAreaの子にします。
MouseArea {
id: parent
MouseArea {
id: child
}
}
親ビューとして使用されるカスタムのWidget型があるため、defaultプロパティがMouseAreaの子になりました。
Item {
default property alias children: mouseArea.data
MouseArea {
id: mouseArea
}
}
ビュー内の要素の状態ごとに状態を作成すると、ifステートメントやcaseステートメントなどを使用して、これらのプロパティを変更できます。つまり、要素をMouseAreaではなくプロパティで機能するように設定し、Elementsプロパティをセットプロパティでの作業ここにない場合は、これが役立つことを願っています。
[〜＃〜] edit [〜＃〜]透明になるように色を追加しました。マウスが今までにない場合。画像を使用している場合は不透明度を使用し、一連のビヘイビアも追加しますが、これは機能しています
例
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"
}
}
}
}
}
Iv'eはいくつかのことを試しましたが、2つのMouseAreaに同時にカーソルを合わせることができないようです。 preventStealingとpropagateComposedEventsは、クリックイベントがある場合にのみ機能するようです。ただし、内部のMouseAreaから、もう一方のentered()シグナルをトリガーできます。このようなもの：
_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();
}
}
}
}
}
_問題は、含まれているMouseAreaからのexited()シグナルが、entered()を再度呼び出す前に呼び出されることです。したがって、アクションボタンを本当に非表示にしたいことを確認するために、exited()で状態の変化を「遅らせる」必要がある場合があります。別の解決策は、現在のマウスの位置を保存し、exited()がその境界の1つにマウスを置いて呼び出された場合にのみボタンを非表示にすることです。
これを試して：
- マウス入力時に発せられる信号を内側の領域に追加します。
- 信号を外側の領域に接続します。
- この信号により、外側の領域がホバー状態になります。
両方でマウスを終了しても、ホバー状態はキャンセルされます。マウスをコントロールから離すと、余分なコードがなくても正しく機能するはずです。