【Qt6 QML Book 基础】08：输入元素（附完整可运行代码）

引言

在 Qt Quick 应用开发中，输入组件是构建交互式界面的核心元素。合理设计输入组件的视觉样式、焦点逻辑与键盘交互，直接影响用户体验。本文结合《Qt6 QML Book》官方示例，从基础组件TextInput/TextEdit的核心特性出发，解析自定义输入组件时的焦点问题，演示如何通过FocusScope和KeyNavigation实现高效键盘交互。

一、运行效果图

二、基础输入组件：TextInput 的核心特性

2.1 基础用法与视觉呈现

TextInput是单行文本输入的基础组件，支持输入约束（validator、inputMask）、回显模式（echoMode）等特性。以下是一个基础示例：

// TextInputExample.qml
Rectangle {
    width: 200; height: 80; color: "linen"
    TextInput {
        id: input1; x: 8; y: 8; width: 96; height: 20
        focus: true; text: "Text Input 1" // 初始聚焦
    }
    TextInput {
        id: input2; x: 8; y: 36; width: 96; height: 20
        text: "Text Input 2"
    }
}

关键点： 

• focus: true：设置初始焦点
• 视觉上仅显示文本和闪烁光标，需通过容器组件添加边框等装饰 

2.2 键盘焦点切换：KeyNavigation 

通过KeyNavigation附加属性实现键盘焦点切换，例如 Tab 键切换：

// Tab键焦点切换示例
TextInput {
    id: input1
    KeyNavigation.tab: input2  // 按下Tab键时焦点切换到input2
}
TextInput {
    id: input2
    KeyNavigation.tab: input1  // 按下Tab键时焦点切换回input1
}

关键点：

• 支持tab、backtab（Shift+Tab）等预设导航键
• 直接