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一样，它也没有一个可视化的显示，所以用户在使用时也要像上述步骤一样将它定制成一个复合组件，然后使用。这些内容与前面代码几乎一样，不再赘述。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！