QML 鼠标穿透

事件：
有一个输入框(TextField)，需要实现鼠标悬浮时改变边框颜色，鼠标移出后恢复原来边框颜色；
这时如果需要实现此功能，就得使用到MouseArea，鼠标操作区域填充满整个TextField。
然后实现鼠标移入移入出的修改边框颜色的效果，具体实现代码：

TextField {
    id: pwdTextField
    width: 400
    height: 40
    font.pixelSize: height / 2
    placeholderText: "请输入密码"            // 背景提示文本
    placeholderTextColor: "#303037"         // 提示文本颜色
    verticalAlignment: Text.AlignVCenter    // 文本垂直居中
    anchors.centerIn: parent

    background: Rectangle {
        anchors.fill: parent
        radius: pwdTextField.height / 2
        color: "#CCFFFF"
        border.width: 1
        border.color: pwdTextField.focus ? "#FF66FF" : "#222"
        MouseArea {
            anchors.fill: parent		// 鼠标区域填充满整个TextField
            hoverEnabled: true			// 启用鼠标悬浮追踪
            onEntered: {				// 鼠标进入
                parent.border.color = "#FF66FF"
            }
            onExited: {					// 鼠标移出
                parent.border.color = pwdTextField.focus ? "#FF66FF" : "#222"
            }
        }
    }
}

但是，此时就出现问题了，鼠标区域会覆盖TextField，使得TextField无法输入文本了

鼠标移入实现边框颜色改变，移出恢复功能确实已经实现了，但是，输入框无法输入文本了…

原因就是设置MouseArea时将TextField给遮住了；

解决问题的方案就是鼠标穿透！将MouseArea的点击事件穿透传给父控件，即TextField;

在MouseArea加入两行代码：

propagateComposedEvents: true     
onPressed: { mouse.accepted = false } 

代码加上后，运行TextField可以正常输入文本了！

最后再优化一下，鼠标指针进入后，修改一下：

Window {
    id: root
    visible: true
    width: 600
    height: 400
    title: qsTr("Hello World")

    TextField {
        id: pwdTextField
        width: 400
        height: 40
        font.pixelSize: height / 2
        placeholderText: "请输入密码"            // 背景提示文本
        placeholderTextColor: "#303037"         // 提示文本颜色
        verticalAlignment: Text.AlignVCenter    // 文本垂直居中
        anchors.centerIn: parent

        background: Rectangle {
            anchors.fill: parent
            radius: pwdTextField.height / 2
            color: "#CCFFFF"
            border.width: 1
            border.color: pwdTextField.focus ? "#FF66FF" : "#222"
            MouseArea {
                anchors.fill: parent        // 填充满父控件
                hoverEnabled: true

                // 鼠标穿透，按下事件不接收，传递给父控件
                propagateComposedEvents: true
                onPressed: {
                    mouse.accepted = false
                }

                onEntered: {
                    parent.border.color = "#FF66FF"
                    cursorShape = Qt.IBeamCursor
                }
                onExited: {
                    parent.border.color = pwdTextField.focus ? "#FF66FF" : "#222"
                    cursorShape = Qt.ArrowCursor
                }
            }
        }
    }
}