QML 焦点如何传播？

Question

我正在尝试弄清楚如何在我的应用程序中正确设置焦点。

我有一个组件 MyItem.qml，我想在它的任何子组件获得焦点时更改它的背景。我还有一个 MyDerivedItem.qml 派生自 MyItem.qml 如果它的任何子项获得焦点，它也应该更改基础 class 的背景。

如果我对文档的理解正确，如果一个组件获得焦点，层次结构中其所有父级的焦点属性将设置为 true（或直到达到 FocusScope 组件）。

如果这是真的，那么当我按下 MyItem.qml 或 MyDerivedItem.qml 中的任何 TextField 时，myItem.focus 属性应该变为 true 并且背景会改变它的颜色.

我已经尝试做一个我想做的小例子，但它的表现并不像我预期的那样。

//main.qml
import QtQuick.Controls 2.0

ApplicationWindow {
    height: 768
    width: 1024
    visible: true

    MyDerivedItem {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        width: parent.width / 2
    }
    MyDerivedItem {
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        width: parent.width / 2
    }
}

//MyItem.qml
import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    id: myItem

    default property alias data: column.data

    color: focus ? "red" : "green"

    Column {
        id: column

        TextField {
            placeholderText: "Input Text Here"
        }
    }
}

//MyDerivedItem.qml
import QtQuick 2.7
import QtQuick.Controls 2.0

MyItem {
    id: myDerivedItem

    TextField {
        placeholderText: "Derived Input Text Here"
    }

    TextField {
        placeholderText: "Derived Input Text Here"
    }

    TextField {
        placeholderText: "Derived Input Text Here"
    }

    TextField {
        placeholderText: "Derived Input Text Here"
    }

    //...
}

Answer 1

这有点被证实了here。据此传播是：Qt -> QQuickWindow -> Item-with-focus。没有遍历 object 树，而是直接进行聚焦。

此规则有一个例外，即 FocusScope 充当聚焦 Item 场景或更高层级中的 FocusScope。所以基本上你可以说，除了 object-tree，还有第二个 focus-tree，其中每个节点都是 FocusScope 和所有其他 Items是叶子。
每个 FocusScope-Node 可能有一个 child 具有焦点。
object-tree 中 Item 的 Children 可能是 focus-tree 中 object-parents 的兄弟姐妹。

Answer 2

我的问题的解决方案是一个小改动。将 FocusScope 添加到 MyItem.qml 如下：

//MyItem.qml
import QtQuick 2.7
import QtQuick.Controls 2.0

FocusScope {
    id: focusScope

    default property alias data: column.data

    Rectangle {
        id: myItem

        anchors.fill: parent
        color: focusScope.focus ? "red" : "green"

        Column {
            id: column
            anchors.fill: parent

            TextField {
                placeholderText: "Input Text Here"
            }
        }
    }
}

QML 焦点如何传播？

How does QML focus propagate?

qt

focus

qml

qtquick2

qtquickcontrols2