前言
本节我们将学习TextInput元素。这是一个允许用户输入单行文本的元素，它常用于收集信息的表单中，例如如果你希望收集某人的信息，你可以获取其名字和姓氏。它提供了一些信号和属性，可用于操作用户输入的数据。它在QT中十分常用，接下来我们将学习一下。
一、了解TextInput
查阅帮助文档：
直接翻译过来：
TextInput类型显示一行可编辑的纯文本。
TextInput用于接受一行文本输入。可以对TextInput项施加输入约束（例如，通过验证器或inputMask），将echoMode设置为适当的值可以将TextInput用于密码输入字段。
在macOS上，Home/End的向上/向下键绑定被明确禁用。如果你想要这样的绑定（在任何平台上），你需要在QML中构建它们。
另请参见文本编辑和文本。
简单来说，这就是一个文本输入框。但因为此前我已经接触过QML中的TextField组件，所以我对此有些困惑。同样的，这个东西也应该类比一下QWidget中的QLineEdit，所以让kimi列一下表格对比（不一定完全正确）。
| 类比维度 | QLineEdit (QWidget) | TextField (QML, Controls 2) | TextInput (QML, Basic) |
|---|---|---|---|
| 功能完整度 | ≈ TextField | ≈ QLineEdit | 只提供核心编辑能力 |
| 外观&主题 | 原生平台样式 | 自动随 Qt Quick 主题 (Material/Universal) 变化 | 无样式，需自绘 |
| 信号丰富度 | returnPressed()textEdited()editingFinished() 等 | 同样具备 onAcceptedonEditingFinishedonClearClicked 等 | onTextChanged |
| 校验/占位/清除 | 手动拼控件或 setClearButtonEnabled() | 一行 clearable: truevalidator: IntValidator{}placeholderText | 全部自己实现 |
最后得出一个初步的结论吧，TextInput 是QML中最基础、最简单的文本输入组件，它甚至没有复杂的样式属性，可能只有简单的颜色字体这种，相关的信号也比较简单。
基于这种情况，考虑到实际开发中需要开发样式，首选肯定是TextField 。不过没有关系，学习讲求循序渐进，我们先代码层面上学习一遍TextInput 。
二、TextInput 和 onEditingFinished
代码如下：
import QtQuick 2.14
import QtQuick.Window 2.14
Window {
visible: true
width: 640
height: 480
title: qsTr("QmlTextInput")
Row{
x: 10
y: 10
spacing: 20
Rectangle{
id: firstNameRectId
width: firstNameLabelId.implicitWidth + 20
height: firstNameLabelId.implicitHeight + 20
color: "dodgerblue"
Text{
id: firstNameLabelId
anchors.centerIn: parent
text: "First name"
}
}
Rectangle{
id: firstNameTextRectId
width: firstNameTextId.implicitWidth + 20
height: firstNameTextId.implicitHeight + 20
color: "grey"
TextInput{
id: firstNameTextId
anchors.centerIn: parent
focus: true
text: "Type in your first name"
onEditingFinished: {
firstNameLabelId.text = text
}
}
}
}
}这里放置了两个矩形，分别是一个纯文本展示Text和文字输入TextInput。
可以看到它们的使用都是十分相似的，TextInput只多了少量东西。
1.focus: true
它让这个TextInput 在组件完成实例化后立刻获得键盘焦点，用户无需再点一下就能直接打字。
2.onEditingFinished
这是一个信号处理器，直接翻译过来就是编辑完成的时候会触发。
什么叫编辑完成，很简单，就是你键盘输入完，按下回车的时候。
这里直接在onEditingFinished中写了，让你它的输入文本同步到第一个矩形的文本之中。
我们看下效果：
此时，我们随便修改一下灰色矩形的文本，并按一下回车：
这里必须说明一下，编辑完成除了按回车这种直观的行为外，还有其他行为可能会触发，比如点击一下任务栏，或者按一下窗口最小化这种也会被判定为输入完成。
三、实现自定义组件
TextInput功能比较简单，似乎没有placeholder text这种效果。所谓placeholder text，就是输入框为空时显示的浅灰色提示语，一旦用户敲下第一个字符，它就会自动消失；当用户把内容全部删掉，提示语又会重新出现。
因此，为了实现这个功能，我们可以将TextInput稍作设计，实现我们自定义的输入组件。同时，强化一下对于自定义组件的掌握程度。
我们新建一个LabelTextInput.qml，这同时也是组件名，以下是它的代码：
import QtQuick 2.14
import QtQuick.Window 2.14
Item {
readonly property alias text: textInputId.text
property alias color: textInputRectId.color
property alias placeHolderText: placeHolderId.text
property alias rect: textInputRectId
signal editingFinished
Rectangle{
id: textInputRectId
width: textInputId.text.length
? textInputId.implicitWidth + 20
: placeHolderId.implicitWidth + 20
height: textInputId.implicitHeight + 20
color: "grey"
Text{
id: placeHolderId
anchors{
centerIn: parent
fill: parent
}
verticalAlignment: TextInput.AlignVCenter
visible: !textInputId.text && !textInputId.inputMethodComposing
text: "null"
}
TextInput{
id: textInputId
anchors.centerIn: parent
anchors.fill: parent
verticalAlignment: TextInput.AlignVCenter
focus: true
onEditingFinished: {
editingFinished
}
}
Component.onCompleted: {
textInputId.editingFinished.connect(editingFinished)
}
}
}看起来好像很复杂，实际上就多了一个Text做占位符。我们可以通过textInputId的length来判断当前是否有输入，然后改变组件尺寸和是否显示占位符文本。比如这里宽度用了条件表达式：
width: textInputId.text.length
? textInputId.implicitWidth + 20
: placeHolderId.implicitWidth + 20这里是当输入框有文本且正在输入的时候，会显示组件：
visible: !textInputId.text && !textInputId.inputMethodComposing至于其他的属性暴露别名、信号连接信号之类的东西，之前文章也讲过了，这里就不赘述，代码还是相对比较简单的。
然后我们修改main.qml的代码：
Window {
visible: true
width: 640
height: 480
title: qsTr("QmlTextInput")
Row{
x: 10
y: 10
spacing: 20
Rectangle{
id: firstNameRectId
width: firstNameLabelId.implicitWidth + 20
height: firstNameLabelId.implicitHeight + 20
color: "dodgerblue"
Text{
id: firstNameLabelId
anchors.centerIn: parent
text: "First name"
}
}
LabelTextInput{
id: firstNameTextRectId
width: rect.width + 20
height: rect.height + 20
color: "grey"
placeHolderText: "Type in your first name"
onEditingFinished: {
firstNameLabelId.text = text
}
}
}
}我们用LabelTextInput取代了TextInput，还提供了placeHolderText这个属性可以指定占位符文本。因为内部矩形本身是自适应大小，所以这里直接用rect来设置了尺寸。最后自定义的信号也能触发修改第一个矩形文本的功能。
让我们看一下运行效果：
完美实现，符合预期！
四、总结
本节第一次接触了文本输入框这一元素，而这也是非常常见和常用的组件了。基于文本输入框，我们可以实现登录界面的用户名密码登录，可以实现各种信息填写。当然，TextInput的功能还比较简单，我们需要学习更多更复杂的组件。
)
