QML实现自定义菜单栏

charles_gz

在用QML做一个菜单窗口，默认情况下是隐藏于窗口左边（留一个像素），当鼠标进入菜单窗口显示菜单窗口。当鼠标离开隐藏窗口。
下面是QML代码：
import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle{
    id:navigation
    color: "#333333"

    property int controlsHeight:30;
    property int controlsWidth:150;
    property int listViewHeight:200;
    property bool navigaionShowFlag:false


    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        onMou**Changed:{
            console.debug("mouse.x=="+mouse.x+"navigateion contains =="+navigation.contains(mouse.x,mouse.y))
            if(navigation.contains(mouse.x,mouse.y))
            {
                navigaionShowFlag = true;
            }
        }
        onExited: {
            //            console.debug("mou**=="+mou**+"mouseY=="+mouseY+"contains=="+navigation.contains(mou**,mouseY));
            if(!navigation.contains(mouse.x,mouse.y))
            {
                navigaionShowFlag = false;
            }
            console.debug("This property holds whether the mouse is currently inside the mouse area."+containsMouse)
        }
    }


    onNavigaionShowFlagChanged: {
        if(navigaionShowFlag)
        {
            showAnima.start();
        }
        else
        {
            hideAnima.start();
        }
    }


    PropertyAnimation{id:hideAnima;target: navigation;property: "x";to:0-(navigation.width-1);duration: 500}
    PropertyAnimation{id:showAnima;target: navigation;property: "x";to:0;duration: 500}


    ListModel{
        id:areaModel
        ListElement{
            text:"朝阳"
        }
        ListElement{
            text:"海淀"
        }
        ListElement{
            text:"通州"
        }
    }

    Column{
        id:layout
        spacing: 12

        ComboBox{
            id:areaCom
            model:areaModel
            width: controlsWidth
            height: controlsHeight
        }
        ComboBox{
            id:areaModel
            model:voltageModel
            width: controlsWidth
            height: controlsHeight
        }
        TextInput{
            id:customInput
            text: "请输入查询名称"
            width: controlsWidth
            height: controlsHeight
        }
        Button{
            id:queryBt
            width: controlsWidth
            height: controlsHeight
            text: qsTr("查  询")
        }

        Component{
            id:stationDelegate
            Item{
                id:viewcontent
                width: voltageCom.width
                height: voltageCom.height
                Text {
                    text: station
                    anchors.centerIn: parent
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        viewcontent.ListView.view.currentIndex = index;
                    }
                }
            }
        }

        ListView{
            id:stationList
            model:areaModel
            delegate: stationDelegate
            width: controlsWidth
            height: listViewHeight
            clip: true
            highlight: Rectangle{
                color: "lightsteelblue"
                radius:10
                y:stationList.currentItem.y
                Behavior on y { SpringAnimation { spring: 3; damping: 0.3 } }
            }
        }
    }

}

在Rectangle的MouseArea事件中实现了onExited槽处理，问题是：鼠标在按钮、combox上的时候都会进入该槽导致菜单窗口隐藏。
如果把Rectangle的MouseArea事件放到最下面就不会进入，但是哪些子控件就不能响应鼠标事件了。

求教各位怎么做可以达到预期功能：鼠标进入--显示；鼠标离开---隐藏

Joey_Chan

你能不能截个图，在图上大概说明一下。。代码太多看不出来

charles_gz

Joey_Chan 发表于 2014-5-29 21:32
你能不能截个图，在图上大概说明一下。。代码太多看不出来

通过鼠标点击解决了问题，说白了 就是当一个父窗口中有子控件（button等）时鼠标在button上也会响应父窗口的鼠标Exited事件。

jakes

也许有个效果图会更好。