QML中如何让Component内的Rectangle获取焦点并捕获键盘事件？

我看了你的代码，问题核心出在焦点的传递与抢占上：当StackView切换当前项时，你调用了currentItem.forceActiveFocus()，这会让ItemLoaderPage（根Item组件）拿到主动焦点，但它作为容器组件，并没有把焦点传递给内部的Loader和最终的Rectangle，导致键盘事件根本到不了你想要的组件上。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：让容器Item不抢占焦点（最简洁） #

修改LoaderPage.qml中的根Item，设置它的focusPolicy为Qt.NoFocus，这样它就不会接受焦点。当StackView调用forceActiveFocus()时，焦点会自动传递给第一个可获得焦点的子元素（也就是你的Loader）：

//LoaderPage.qml
Item {
    objectName: "ItemLoaderPage"
    focusPolicy: Qt.NoFocus // 添加这一行，禁止Item抢占焦点
    // Keys.forwardTo: loader 此配置可暂时移除

    Loader {
        id: loader
        anchors.fill: parent
        objectName: "Loader"
        focus: true
        sourceComponent: rect1
    }

    Component {
        id: rect1
        Rectangle {
            Keys.onReleased: {
                if(event.key === Qt.Key_Escape || event.key === Qt.Key_Back) {
                    console.log("Esc or back pressed from", objectName)
                    event.accepted = true
                }
            }
            objectName: "Rectangle"
            focus: true
            color: "blue"
        }
    }
}

设置完成后，ItemLoaderPage不会再拦截焦点，焦点会自然落到Loader上，而Loader加载的Rectangle因为设置了focus: true，会成为最终的焦点持有者，键盘事件就能被正确捕获。

方案2：手动转发焦点到Loader #

如果不想修改Item的焦点策略，也可以在ItemLoaderPage获得焦点时，手动把焦点传递给内部的Loader：

//LoaderPage.qml
Item {
    objectName: "ItemLoaderPage"
    // 当Item拿到焦点时，立刻转发给Loader
    onActiveFocusChanged: {
        if (activeFocus) {
            loader.forceActiveFocus()
        }
    }

    Loader {
        id: loader
        anchors.fill: parent
        objectName: "Loader"
        focus: true
        sourceComponent: rect1
    }

    // 下方Component代码保持不变
}

这个方法的逻辑是：当ItemLoaderPage通过forceActiveFocus()拿到焦点后，触发activeFocusChanged信号，我们主动让Loader获取焦点，进而传递给Rectangle。

方案3：直接让StackView聚焦到目标Rectangle #

另一种思路是跳过中间层，直接让StackView切换后聚焦到最终的Rectangle组件。你可以修改StackView的onCurrentItemChanged事件，通过findChild找到内部的Rectangle并设置焦点：

//main.qml
StackView {
    anchors.fill: parent
    initialItem: "qrc:/LoaderPage.qml"
    objectName: "StackView"
    onCurrentItemChanged: {
        // 通过objectName查找目标Rectangle
        const targetRect = currentItem.findChild(Object, "Rectangle")
        if (targetRect) {
            targetRect.forceActiveFocus()
        }
    }
}

这个方法更直接，但依赖组件的objectName，如果后续组件结构变化可能需要调整，灵活性稍差。

验证方法 #

你可以保留main.qml中的onActiveFocusItemChanged日志，运行后如果控制台输出***** ACTIVE FOCUS: Rectangle(0x...) *****，就说明焦点已经正确落到目标组件上，此时按Esc或Back键就能看到预期的日志了。

内容的提问来源于stack exchange，提问作者Fausto01