QML用于接收键盘输入的有两个元素：TextInput和TextEdit。TextInput是单行文本输入框，支持验证器、输入掩码和显示模式等，与QLineEdit不同，QML的文本输入元素只有一个闪动的光标和用户输入的文本，没有边框等可视元素。因此，为了能够让用户意识到这是一个可输入元素，通常需要一些可视化修饰，比如绘制一个矩形框，但更好的办法是创建一个组件，组件被定义好后可在编程中作为“输入控件”直接使用，效果与可视化设计的文本框一样。
本文实例用QML输入元素定制文本框，可用Tab键控制其焦点转移, 运行效果如下图所示。
具体实现步骤如下。
(1) 新建项目
新建QML应用程序，项目名称为“TextInput”。
(2) 自定义TextBox组件
右击项目视图“Resources” — “qml.qrc”下的“/’节点，选择“Add New...”项，新建“TextBox.qml”文件，编写代码如下：
import QtQuick 2.0
FocusScope { //(a)
property alias label: label.text //(b)
property alias text: input.text //(c)
Row { //(d)
spacing: 5
Text { //输入提示文本
id: label
text: "标签"
}
Rectangle{ //(e)
width: 100
height: 20
color: "white" //白底色
border.color: "gray" //灰色边框
TextInput { //(f)
id: input
anchors.fill: parent //充满矩形
anchors.margins: 4
focus: true //捕捉焦点
text: "请输入内容" //初始文本
}
}
}
}其中，
- (a) FocusScope{...}:将自定义的组件置于FocusScope元素中是为了能有效地控制焦点。因TextInput是作为Rectangle的子元素定义的，在程序运行时，Rectangle不会主动将焦点转发给TextInput，故输入框无法自动获得焦点。为解决这一问题，QML专门提供了FocusScope,因它在接收到焦点时，会将焦点交给最后一个设置了focus: true的子对象，故应用中将TextInput的focus属性设为true以捕捉焦点，这样文本框的焦点就不会再被其父元素Rectangle夺去了。
- (b) property alias label: label.text:定义Text元素的text属性的别名，是为了在编程时引用该别名修改文本框前的提示文本，定制出“学号”“姓名”等对应不同输入项的文本框，增强通用性。
- (c) property alias text: input.text:为了让外界可以直接设置TextInput的text属性，给这个属性也声明了一个别名。从封装的角度而言，这是一个很好的设计，它巧妙地将TextInput的其他属性设置的细节全部封装于组件中，只暴露出允许用户修改的text属性，通过它获取用户界面上输入的内容，提高了安全性。
- (d) Row：用Row定位器设计出这个复合组件的外观，它由Text和Rectangle两个元素行布局排列组合而成，两者顶端对齐，相距spacing为5。
- (e) Rectangle{…}:矩形元素作为TextInput的父元素，是专用于呈现输入框可视外观的，QML本身提供的TextInput只有光标和文本内容而无边框，将矩形设为白色灰边框，对TextInput 进行可视化修饰。
- (f) TextInput:这才是真正实现该组件核心功能的元素，将其定义为矩形的子元素并且充满整个Rectangle，就可以呈现出与文本框一样的可视效果。
(3) 编写主程序
打开“main.qml”文件，编写代码如下：
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 280
height: 120
visible: true
title: qsTr("TextInput")
Rectangle {
width: 360
height: 360
color: "lightgray"
anchors.fill: parent //背景设为亮灰色为突出文本框效果
/*以下直接使用定义好的复合组件，生成所需文本框控件*/
TextBox { // “学号”文本框
id: tb1
x: 25; y:25
focus: true //初始焦点之所在
label:"学号" //设置提示标签文本为"学号"
text: focus ? "" : "请输入内容…" //获得焦点则清空提示文字，由用户输入内容
KeyNavigation.tab: tb2 //按Tab键焦点转移至“姓名”文本框
}
TextBox { // “姓名”文本框
id: tb2
x:25; y:60
label: "姓名"
text: focus ? "" : "请输入内容…"
KeyNavigation.tab : tb1 // 按Tab键焦点又回到“学号”文本框
}
}
}TextEdit与TextInput非常类似，唯一的区别是:TextEdit是多行的文本编辑组件。与TextInput一样，它也没有一个可视化的显示，所以用户在使用时也要像上述步骤一样将它定制成一个复合组件，然后使用。这些内容与前面代码几乎一样，不再赘述。
————————————————
觉得有用的话请关注点赞，谢谢您的支持！
对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！
