如何管理自定义QML组件中的状态焦点？

Question

为了管理各个快速控件组件的几何结构，我创建了一个可拖动的自定义组件。

组件由两个部分组成：

• “机械手”，它是一个可拖动和可调整大小的矩形。
• 位于机械手中心的内部部件。

对行为的描述：

1. 无焦点：默认状态下，机械手是不可见的，您只能看到内部组件
2. 焦点：当您单击组件(或尝试拖动它)时，您将进入此状态，机械手将变为可见的，但无法访问内部组件。禁用退出或单击组件外部(进入状态1)
3. 内部焦点：当您双击组件时，操纵器保持可见，您仍然可以调整大小，但是内部组件具有主要焦点(例如，现在可以编辑TextEdit )。禁用退出状态(进入状态2)或单击组件外部(状态1)

当机械手区域可见时，组件的示例

此组件的逻辑与桌面环境中文件夹的逻辑类似(除调整大小外)机械手将是文件夹本身，内部组件是其名称。

与文件夹类比

在这里，我发布了一个简化版本的我的机械手，我相信它将有助于构建一个答案，(我尝试了许多不同的几个小时，这是一个非功能性的尝试)

FocusScope{
    id: root
    width: 175; height: 25;
    focus: true

    states: [
        State {
            name: "noFocus"
            when: !manipulator.activeFocus && !innerComp.activeFocus
            PropertyChanges {
                target: innerComp
                enabled: false
            }
            PropertyChanges {
                target: manipulator
                visible: false
            }
        },

        State {
            name: "focused"
            when: manipulator.activeFocus
            PropertyChanges {
                target: innerComp
                enabled: false
            }
            PropertyChanges {
                target: manipulator
                visible: true
            }
        },
        State {
            name: "innerFocus"
            when: innerComp.activeFocus
            PropertyChanges {
                target: innerComp
                enabled: true
            }
            PropertyChanges {
                target: manipulator
                visible: true
            }
        }
    ]

    //visual area of manipulation (drag, redimension, etc)
    MouseArea{
        id: manipulator
        anchors.fill: parent

        onDoubleClicked: forceActiveFocus(innerComp) //go to state 3 "innerFocus"
        drag.target: manipulator

        Keys.onEscapePressed: forceActiveFocus(root) //I don´t think this is the correct to loose focus but I don´t know how to do that

        Rectangle {
            id: background
            anchors.fill: parent
            color: "lightsteelblue";
        }
    }
    //Inner Component (TextField for example)
    InnerComp {
        id: innerComp
        anchors.fill: parent

        Keys.onEscapePressed: forceActiveFocus(manipulator) //return state 2 "focused"
    }
}

Answer 1

我终于找到了解决办法，就像qt论坛上有人提出的那样：

也许可以逆转依赖，即使焦点依赖于状态，而不是状态依赖于焦点？

所以我改变了我的代码，现在它起作用了！

我在这里为可能对它感兴趣的人发布了解决方案(正如我所说的，这是真实代码的简化版本)：

Item {
    id: root
    width: 175; height: 25;

    states: [
        State {
            name: "noFocus"

            PropertyChanges {
                target: innerComp; enabled: false
            }
            PropertyChanges {
                target: background; visible: false
            }
            PropertyChanges {
                target: manipulator; focus: true
            }
        },

        State {
            name: "focused"

            PropertyChanges {
                target: innerComp; enabled: false
            }
            PropertyChanges {
                target: background; visible: true
            }
            PropertyChanges {
                target: manipulator; focus: true
            }
        },
        State {
            name: "innerFocus"

            PropertyChanges {
                target: innerComp; enabled: true
            }
            PropertyChanges {
                target: background; visible: true
            }
            PropertyChanges {
                target: manipulator; focus: true
            }
        }
    ]
    state: "noFocus"

    //visual area of manipulation (drag, redimension, etc)
    MouseArea{
        id: manipulator
        anchors.fill: parent

        onPressed: {
            root.state = "focused"
            forceActiveFocus(manipulator) //this prevents loosing focus in some especific situations
        }
        onDoubleClicked: root.state = "innerFocus"

        Keys.onEscapePressed: root.state = "noFocus"

    }
    Rectangle {
        id: background
        anchors.fill: parent
        color: "lightsteelblue";
    }
    //Inner Component (TextField for example)
    InnerComp {
        id: innerComp
        anchors.fill: parent

        Keys.onEscapePressed: root.state = "focused"
    }
}