如何在离屏窗口渲染焦点指示器？Qt VR自定义UI实现问题

我之前踩过一模一样的坑！用QQuickRenderControl做VR里的离屏QML UI时，焦点和激活状态总是“隐身”——文本框点了没光标、没蓝框，其实核心问题是离屏窗口没像普通窗口那样处理焦点事件链，QML的视觉状态更新全靠正确的焦点通知撑着。下面是我亲测有效的解决办法：

离屏的QQuickWindow（或者说由QQuickRenderControl托管的UI场景）没有绑定系统窗口管理器，所以不会自动处理焦点归属。你用运动控制器模拟的鼠标点击/移动，只是触发了鼠标事件，但没同步更新QML元素的**focus或activeFocus**属性——而文本框的光标、激活轮廓这些样式，全是绑定在这些属性上的，属性没正确触发，样式自然不会生效。

1. 手动绑定点击事件与焦点状态 #

当运动控制器“点击”某个QML元素时，别只发鼠标点击事件，还要主动给目标元素设置焦点：

• 先在C++端通过QQuickWindow::itemAt()获取点击的目标元素，然后手动切换焦点：

// 假设你已经通过控制器坐标转换得到了UI上的点击位置pos
QPointF uiClickPos = ...;
QQuickItem* clickedItem = quickWindow->itemAt(uiClickPos.toPoint());

if (clickedItem) {
    // 先清除上一个焦点元素的焦点状态
    if (QQuickItem* oldFocusItem = quickWindow->focusItem()) {
        oldFocusItem->setFocus(false);
    }
    // 给当前点击的元素设置焦点，并强制激活activeFocus（针对输入类控件）
    clickedItem->setFocus(true);
    clickedItem->forceActiveFocus(Qt::MouseFocusReason);
}

• 在QML里，确保控件的样式明确绑定焦点状态（有些默认样式可能依赖平台风格，离屏时会失效）：

TextField {
    id: inputField
    // 自定义激活时的边框样式
    border.color: activeFocus ? "#2196F3" : "#BDBDBD"
    border.width: activeFocus ? 2 : 1
    // 确保光标只在激活时显示
    cursorVisible: activeFocus
}

2. 同步渲染循环与UI状态更新 #

QQuickRenderControl的渲染必须和UI状态变化同步，尤其是焦点更新后，要确保下一帧渲染时状态已经生效：

• 把UI的状态更新、渲染步骤嵌入到VR的主渲染循环里，不要只在有事件时才触发：

void renderVRFrame() {
    // 第一步：处理运动控制器输入，更新UI焦点
    handleControllerInput();
    
    // 第二步：让QQuickRenderControl同步UI状态（处理polish、布局更新）
    quickRenderControl->polishItems();
    quickRenderControl->sync();
    
    // 第三步：将UI渲染到目标帧缓冲
    quickRenderControl->render();
    
    // 第四步：把UI纹理绘制到VR场景的四边形上
    drawUITextureToVRQuad();
}

• 还要确保QQuickWindow的上下文和VR场景的OpenGL上下文是共享的，否则渲染会出各种奇怪问题。

3. 给输入控件模拟键盘事件（可选） #

如果需要在文本框里输入内容，光有焦点还不够，得给离屏窗口发送键盘事件：

// 比如模拟输入字符'A'
QKeyEvent pressEvent(QEvent::KeyPress, Qt::Key_A, Qt::NoModifier, "A");
QCoreApplication::sendEvent(quickWindow, &pressEvent);

QKeyEvent releaseEvent(QEvent::KeyRelease, Qt::Key_A, Qt::NoModifier);
QCoreApplication::sendEvent(quickWindow, &releaseEvent);

这样文本框才能接收到输入，光标也会正确移动。

4. 检查初始化流程是否正确 #

确保QQuickRenderControl和QQuickWindow的绑定没出错，尤其是上下文和渲染目标的设置：

// 初始化QQuickRenderControl
QQuickRenderControl* renderControl = new QQuickRenderControl(this);
QQuickWindow* quickWindow = new QQuickWindow(renderControl);

// 设置和VR场景共享的OpenGL上下文
quickWindow->setOpenGLContext(sharedGLContext);
// 设置渲染目标为你的自定义帧缓冲
quickWindow->setRenderTarget(yourFBO);

// 加载QML并设置根元素
QQmlComponent component(&qmlEngine, QUrl("qrc:/VRUI.qml"));
QQuickItem* rootItem = qobject_cast<QQuickItem*>(component.create());
if (rootItem) {
    rootItem->setParentItem(quickWindow->contentItem());
    rootItem->setSize(quickWindow->size());
}

• 有些QML控件的默认样式依赖QtQuick.Controls的平台风格，离屏渲染时可能失效，建议显式指定样式（比如Material风格）：

import QtQuick.Controls.Material 2.15

TextField {
    Material.accent: Material.Blue
    Material.primary: Material.Gray
}

• Qt 5和Qt 6的QQuickRenderControl API有细微差异，比如Qt 6中render()方法需要传入渲染目标，要注意对应调整。

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