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

我的问题的解决方案是一个小小的改变。添加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"
            }
        }
    }
}