qt - 如何实现点击TextField外的区域使TextField失去焦点？

Question

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    TextField {
        id:textField
        width: 130
        height: 50
    }

    Button {
        anchors.right: parent.right
        text: "lose Focus"
    }
}

为什么在单击按钮时 textField 不会失去焦点？
如何实现点击TextField外的区域使TextField失去焦点？

Answer 1

使用现有代码的最简单方法是 force active focus单击按钮时在另一个项目上:

Button {
    anchors.right: parent.right
    text: "lose Focus"
    onClicked: forceActiveFocus()
}

使 TextField单击区域外的区域时失去焦点，您可以使用 MouseArea 执行类似操作:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea {
        anchors.fill: parent
        onClicked: forceActiveFocus()
    }

    TextField {
        id: textField
        width: 130
        height: 50
    }
}

此项目需要低于(即 Z 值低于)场景中的其他项目。您还可以使其成为其他项目的父项以实现此目的:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea {
        anchors.fill: parent
        onClicked: forceActiveFocus()

        TextField {
            id: textField
            width: 130
            height: 50
        }
    }
}

如果您使用的是 Qt Quick Controls 2，您可以使用 focusPolicy 属性(property)，例如 Pane :

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Pane {
        anchors.fill: parent
        focusPolicy: Qt.ClickFocus
    }

    TextField {
        id: textField
        width: 130
        height: 50
    }
}