QML焦点如何传播?

时间:2017-01-26 10:43:33

标签: qt focus qml qtquick2 qtquickcontrols2

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

我有一个组件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"
    }

    //...
}

2 个答案:

答案 0 :(得分:1)

这有点夸张here。根据该传播是:Qt - > QQuickWindow - >项目 - 与焦点。 没有对象树的遍历,但聚焦反而直接发生。

此规则有一个例外,即FocusScope作为对场景的焦点Item或较高层次的FocusScope。 所以基本上你可以说,除了对象树之外,还有第二个焦点树,其中每个节点都是FocusScope,所有其他Items都是叶子。<登记/> 每个FocusScope - 节点可能有一个具有焦点的子节点 对象树中Item的子节点可能是焦点树中对象父节点的兄弟节点。

答案 1 :(得分: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"
            }
        }
    }
}