QML焦點是如何傳播的？

Question

我試圖弄清楚如何在我的應用程序中正確設置焦點。

我有一個組件MyItem.qml，我想在它的任何一個孩子獲得焦點時改變它的背景。 我還有一個MyDerivedItem.qml派生自MyItem.qml，如果它的任何子節點獲得焦點，它也應該改變基類的背景。

如果我正確理解文檔，如果組件獲得焦點，則層次結構中其所有父項的focus屬性將設置為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

這有點doumented 這里 。 根據傳播的結果：Qt - > QQuickWindow - > Item-with-focus。 沒有對象樹的遍歷，但聚焦反而直接發生。

有一個例外，那就是FocusScope充當聚焦Item對場景或FocusScope更高hirarchy。 所以基本上你可以說，除了對象樹之外，還有第二個焦點樹 ，其中每個節點都是FocusScope ，所有其他Items都是葉子。
每個FocusScope -Node可能有一個具有焦點的子項。
對象樹中Item的子節點可能是焦點樹中對象父節點的兄弟節點。

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"
            }
        }
    }
}