Qt(QML)的键盘InputPanel点击空白区域自动缩回去

        qml自带的原生键盘，在官方给的demo中不能通过点击键盘以外的可获得焦点控件来实现自动缩回，这里提供了一种简单的方法，实现点击键盘外实现缩回。

一、不涉及堆叠的方式

1.代码段：

    Item {
        id:parentRoot
        anchors.fill: parent

        MouseArea//用于隐藏键盘  注意：这个控件的位置必须在输入框上面
        {
            anchors.fill:parent
            enabled: inputPanel.active
            onClicked:
            {
                if(activeFocusItem.mapToItem(parentRoot,0,0).x < mouse.x && (activeFocusItem.mapToItem(parentRoot,0,0).x + activeFocusItem.width)  > mouse.x &&
                        activeFocusItem.mapToItem(parentRoot,0,0).y < mouse.y && (activeFocusItem.mapToItem(parentRoot,0,0).y + activeFocusItem.height)  > mouse.y)
                {
                    return
                }
                focusText.forceActiveFocus()//强制把焦点给改变，随便一个就行
            }
        }

        Row//行布局 两个输入框和一个文本
        {
            anchors.horizontalCenter: parent.horizontalCenter
            y:100
            spacing: 20
            Repeater
            {
                model:2
                TextField
                {
                    width: 100
                    height: 50
                    background: Rectangle {
                        anchors.fill: parent
                        border.color: "#21be2b"
                    }
                }
            }
            Text {
                id:focusText
                width: 100
                height: 50
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: qsTr("焦点移出位置")
            }
        }
    }

    InputPanel {//自带的键盘
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }

2.代码解释

        这块的核心部分就是MouseArea这部分的处理，我们将这个控件放在输入框的上面，这是因为控件的堆叠层次，MouseArea此时处于输入框（TextField）的下层，这样它的可点击区域就不会遮盖输入框。其次是这一部分：

                if(activeFocusItem.mapToItem(parentRoot,0,0).x < mouse.x && (activeFocusItem.mapToItem(parentRoot,0,0).x + activeFocusItem.width)  > mouse.x &&
                        activeFocusItem.mapToItem(parentRoot,0,0).y < mouse.y && (activeFocusItem.mapToItem(parentRoot,0,0).y + activeFocusItem.height)  > mouse.y)
                {
                    return
                }

这块是为了判断点击的点是否在输入框内，其中mapToItem是为了判断当前焦点控件在parentRoot下相对于（0，0）的相对坐标，这个是为了统一坐标系，activeFocusItem始终会是输入框。

focusText.forceActiveFocus()//强制把焦点给改变，随便一个就行

上面这个就是让键盘缩回去的方法，把焦点从输入框移除，键盘缩回，至于为什么会缩回，你们可以自己看InputPanel的动画实现方法，这里我就不解释。

二、涉及堆叠的方式

        对于一些滑动，滚动的控件ListView和Flickable之类的，这种仅仅用上面的方法还是不够的，它本身就是覆盖全部的区域的可点击区域，所以，我们需要将它的点击信号传递到堆叠较低的父控件上，这里用到了MouseArea的一个属性propagateComposedEvents

具体方法就是在头部代理和内容代理中添加：

         MouseArea {
             anchors.fill: parent
             propagateComposedEvents: true
             onClicked: {
                 mouse.accepted = false
             }
         }

上面的两种方法基本上可以满足在任何界面实现缩回的效果了