QML 焦点如何传播？

Posted 2023-02-16

【中文标题】QML 焦点如何传播？

【英文标题】：How does QML focus propagate?

【发布时间】：2017-01-26 10:43:32

【问题描述】：

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

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

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

如果这是真的，那么当我按下 MyItem.qml 或 MyDerivedItem.qml 中的任何 TextFields 时，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"
    

    //...

【参考方案1】：

这有点证明here。对应的传播是：Qt -> QQuickWindow -> Item-with-focus。 没有遍历对象树，而是直接进行聚焦。

这条规则有一个例外，那就是FocusScope，它充当着面向场景的焦点Item，或者在更高层次结构中充当FocusScope。 所以基本上你可以说，除了对象树之外，还有第二个焦点树，其中每个节点都是FocusScope，而所有其他Items 都是叶子。 每个FocusScope-Node 可能有一个具有焦点的子节点。 对象树中Item 的子对象可能是焦点树中其对象父对象的兄弟。

【参考方案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"