QML中SpinBox控件KeyNavigation.tab导航失效问题

我来帮你解决这个SpinBox的Tab导航问题！你的代码里有两个关键问题导致了这个现象，咱们一步步拆解并修复：

问题根源分析 #

1. 混用Qt Quick Controls版本：你同时导入了QtQuick.Controls 1.4和2.0，这两个控件库的焦点管理逻辑完全不同，很容易导致导航行为混乱，这是首要的坑。
2. 可编辑SpinBox的焦点不在容器本身：当SpinBox的editable设为true时，实际获得焦点的是它内部的textInput子组件，而不是SpinBox容器。你把KeyNavigation.tab设置在SpinBox上，自然不会被触发——因为焦点根本不在这儿！

具体解决方案 #

你可以根据自己的业务需求选择以下方案：

方案1：给可编辑SpinBox的内部textInput设置导航规则

既然焦点在内部的输入框上，那咱们直接把导航规则绑定到textInput上就行，修改spinBox1和spinBox2的代码：

SpinBox {
    id: spinBox1
    width: 100
    height: 30
    editable: true
    // 把Tab导航目标指定给内部的textInput
    textInput.KeyNavigation.tab: spinBox2
}

SpinBox {
    id: spinBox2
    width: 100
    height: 30
    editable: true
    textInput.KeyNavigation.tab: textField
}

方案2：统一控件库版本（必做！）

混用Controls 1.x和2.x是非常不推荐的行为，会带来很多不可预测的问题。直接删掉import QtQuick.Controls 1.4这一行，只保留2.0的导入：

import QtQuick 2.9
import QtQuick.Controls 2.0

方案3：如果不需要编辑，禁用SpinBox的editable属性

如果你的场景只需要通过上下箭头调整数值，不需要手动输入，那直接把editable设为false，这样焦点就会落在SpinBox本身，原来的KeyNavigation.tab设置就会生效：

SpinBox {
    id: spinBox1
    KeyNavigation.tab: spinBox2
    width: 100
    height: 30
    editable: false
}

完整修改后的示例代码 #

这里我结合方案1和方案2，给你一个可以直接运行的版本：

import QtQuick 2.9
import QtQuick.Controls 2.0

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    height: 200
    width: 400

    Item {
        id: page
        anchors.fill: parent

        ScrollView {
            id: scrollView
            anchors.fill: parent

            Column{
                width: parent.width
                spacing:10

                TextField {
                    id:textField
                    KeyNavigation.tab: spinBox1
                    implicitHeight: 30
                    font.bold: true
                }

                SpinBox {
                    id: spinBox1
                    width: 100
                    height: 30
                    editable: true
                    textInput.KeyNavigation.tab: spinBox2
                }

                ComboBox {
                    id: comboBox
                    anchors.topMargin: 10
                    // 可选：给ComboBox也设置导航规则，比如指向spinBox2
                    KeyNavigation.tab: spinBox2
                }

                SpinBox {
                    id: spinBox2
                    width: 100
                    height: 30
                    editable: true
                    textInput.KeyNavigation.tab: textField
                }
            }
        }
    }
}

这样修改后，你再按Tab键测试，spinBox1就能直接跳转到spinBox2了，不会被中间的ComboBox干扰~

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