QML：设置表格单元格中TextInput焦点，实现Tab键导航输入

我来帮你搞定这个Qt Quick表格的焦点导航问题！

问题根源分析 #

你遇到的核心问题是默认情况下表格的焦点会落在整行/单元格上，而非内部的输入控件；而点击过输入框后能正常用箭头导航，是因为此时输入控件已经被加入到焦点链中，表格“记住”了这个聚焦目标。我们需要让单元格默认就把焦点代理到内部的TextInput/ComboBox，同时调整表格的导航逻辑，确保Tab键直接在输入控件间切换。

具体解决方案 #

1. 修改输入控件组件，设置焦点代理

你的FocusScope包裹的TextInput需要明确把焦点转发给内部输入框，这样当单元格获焦时，焦点会自动落到输入控件上。修改你的TextInput组件：

import QtQuick 2.0
import ".."
FocusScope {
    // 关键：让FocusScope把焦点代理到内部的textInput
    focusProxy: textInput
    property alias text: textInput.text
    property alias font: textInput.font
    x: rectangle.x; y: rectangle.y
    width: rectangle.width; height: rectangle.height
    Rectangle {
        id: rectangle
        anchors.fill: parent
        border.color: Style.table.itemBorderColor
        color: textInput.activeFocus ? "lightgray" : "white"
        TextInput {
            id: textInput
            // 移除默认的focus: true，交给FocusScope代理
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.leftMargin: 5
            anchors.rightMargin: 5
            color: parent.enabled ? "grey" : ""
            selectByMouse: true
            enabled: parent.enabled
            clip: true
            font.pixelSize: Style.fontSize
        }
    }
}

2. 调整表格委托的焦点逻辑

你用Loader动态创建组件，需要确保动态生成的单元格把焦点代理到加载的输入控件。修改表格委托代码：

StepTableView {
    // 如果是Qt Quick Controls 1，设置导航模式为单元格级
    navigationMode: TableView.NavigationModeCells
    ...
    TableViewColumn {
        id: tcValue
        role: "value"
        title: qsTr("Value")
        delegate: Component {
            Loader {
                id: delegateLoader
                sourceComponent: {
                    if (!model || !parent) return null;
                    // 动态创建Item时，指定焦点代理到加载的输入组件
                    return Qt.createQmlObject(`
                        import QtQuick 2.0;
                        import ".."
                        Item {
                            anchors.fill: parent
                            Component.onCompleted: {
                                let inputComp = loadComponent(this, model, styleData);
                                // 让单元格的焦点直接转发给输入控件
                                focusProxy = inputComp;
                            }
                        }
                    `, parent);
                }
            }
        }
    }
}

3. 自定义Tab键导航行为（可选）

如果默认Tab键还是没有按预期在输入控件间切换，可以手动拦截Tab事件，强制焦点在Value列的输入控件间移动：

StepTableView {
    ...
    Keys.onTabPressed: {
        const currentFocus = activeFocusItem;
        if (!currentFocus) return;
        
        // 获取当前行，计算下一行索引
        const currentRow = styleData.row;
        const nextRow = currentRow + 1;
        
        if (nextRow < model.count) {
            // 定位到下一行Value列的单元格，强制聚焦输入控件
            const nextCell = tcValue.cellAt(nextRow, 0);
            if (nextCell && nextCell.focusProxy) {
                nextCell.focusProxy.forceActiveFocus();
            }
        }
        event.accepted = true; // 阻止默认Tab行为
    }

    // 处理Shift+Tab上移逻辑
    Keys.onShiftTabPressed: {
        const currentFocus = activeFocusItem;
        if (!currentFocus) return;
        
        const currentRow = styleData.row;
        const prevRow = currentRow - 1;
        
        if (prevRow >= 0) {
            const prevCell = tcValue.cellAt(prevRow, 0);
            if (prevCell && prevCell.focusProxy) {
                prevCell.focusProxy.forceActiveFocus();
            }
        }
        event.accepted = true;
    }
}

效果说明 #

设置focusProxy后，无论是通过Tab键还是箭头键导航，表格都会直接把焦点落到TextInput/ComboBox上，而非整行；配合自定义Tab事件，就能实现完全符合预期的输入控件间导航体验，不需要先手动点击每个输入框。

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