树莓派Qt系列教程18：行编辑输入控件

前言

TextInput

TextInput的属性和方法非常多，我们只列出之前没接触过的和比较重要的属性和方法，其他的属性大家可以通过下面的链接自行了解。

其他简单属性

TextInput的属性和方法

属性

• acceptableInput : bool，除非已设置验证器或输入掩码，否则此属性始终为true
• activeFocusOnPress : bool，设置TextInput是否应该在鼠标按下时获得主动焦点
• autoScroll : bool，设置当文本长于宽度时，TextInput是否应滚动
• canPaste : bool，设置如果TextInput可写，则返回true
• canRedo : bool,设置如果TextInput可写并且存在可以重做的撤消操作，则返回true
• canUndo : bool，设置如果TextInput可写，并且以前的操作可以撤消，则返回true
• cursorDelegate : Component，设置如果为TextInput设置cursorDelegate ，则此delegate将用于绘制光标而不是标准光标
• cursorPosition : int,光标在TextInput中的位置
• cursorVisible : bool,当TextInput显示光标时设置为true
• echoMode : enumeration,指定如何在TextInput中显示文本,选项可参考上面的链接
• font.capitalization : enumeration，设置文本的大写
• font.hintingPreference : enumeration，在文本上设置首选提示
• font.italic : bool，设置字体是否具有斜体样式
• font.letterSpacing : real，设置字体的字母间距
• font.strikeout : bool，设置字体是否具有删除线样式
• inputMask : string，允许在TextInput上设置输入掩码，以限制允许的文本输入
• length : int，返回TextInput项中的字符总数
• maximumLength : int，TextInput中文本的最大允许长度
• overwriteMode : bool，用户输入的文本是否将覆盖现有文本
• readOnly : bool，设置用户输入是否可以修改TextInput的内容
• selectedText : string，只读属性，提供当前在文本输入中选择的文本
• validator : Validator，允许在TextInput上设置验证器
• wrapMode : enumeration，设置此属性可以将文本包装为TextInput项的宽度。仅当设置了显式宽度时，文本才会换行。选项可参考上面的链接

信号

• accepted()，当按下Return或Enter键时，将发出此信号。请注意，如果在文本输入上设置了validator或inputMask，则仅当输入处于可接受状态时才会发出信号。
• editingFinished()，当按下Return或Enter键或文本输入失去焦点时，将发出此信号。
• textEdited()，只要编辑文本，就会发出此信号。

方法

• clear()，清除文本输入的内容，并从输入法中重置部分文本输入。
• copy()，将当前选定的文本复制到系统剪贴板。
• cut()，将当前选定的文本移至系统剪贴板。
• deselect()，删除活动文本选择。
• ensureVisible(position)，滚动文本输入的内容，以便在文本输入的边界内可以看到指定的字符位置。
• string getText(start, int end)，返回介于start位置和end位置之间的文本部分。
• insert(position, string text)，将文字text插入到TextInput的位置position。
• moveCursorSelection(position, SelectionMode mode),将光标移动到位置并根据可选的mode参数更新选择。
• paste()，用系统剪贴板的内容替换当前选择的文本。
• redo()，恢复上一次操作。
• remove(start, int end)，从TextInput删除介于开始位置和结束位置之间的文本部分。
• undo()，撤消上一次操作。

TextInput的例程

//需要导入QtQuick.Controls 2.3
Row {
           spacing: 10
           anchors.centerIn: parent

           Text { text: qsTr("请输入密码：") ;
                  font.pointSize: 15
                  verticalAlignment: Text.AlignVCenter
           }

           Rectangle {
               width: 100
               height: 27
               color: "lightgrey"
               border.color: "grey"

               TextInput{
                   anchors.fill: parent
                   anchors.margins: 2
                   font.pointSize: 14
                   focus: true
                   maximumLength: 6
               }
           }
       }

行定位器中设置Text和Rectangle，其中，Rectangle是TextInput的可视化外观，运行程序，你会得到一个只能输入6个字符的密码框。如果我们不设置maximumLength，当我们输入过多的内容时，就会显示到Rectangle之外。如下图所示：

所以如果我们不规定输入的字符数量限制时，就要动态的改变输入框背景的尺寸，这个可以通过 contentWidth 和 contentHeight 属性来根据输入内容的宽高设置背景矩形的大小。

一般我们输入密码时，都不会直接显示出来，而是用一个个的小圆点来表示，这里用到的是echoMode属性。echoMode属性指定了文本的显示方式。

• TextInput.Normal：直接显示文本（默认方式）；
• TextInput.Password：使用密码掩码字符（根据不同平台显示效果不同）来代替真实的字符；
• TextInput.NoEcho：不显示输入的内容；
• TextInput.PasswordEchoOnEdit：使用密码掩码字符，但在输入时显示真实字符。

  Rectangle {
      width: input.contentWidth<100 ? 100 : input.contentWidth +10
      height: input.contentHeight + 5
      color: "lightgrey"
      border.color: "grey"
      TextInput {
          id: input
          anchors.fill: parent
          anchors.margins: 2
          font.pointSize: 14
          echoMode: TextInput.Password //使用密码掩码字符
          
          onEditingFinished: {
               console.log(text)
          }
      }
  }

  
  

当输入密码完成按下回车键后触发editingFinished信号，所以在onEditingFinished信号处理函数中将输入的字符打印出来。

既然是密码，一般都会有输入内容的限制，比如说只能输入数字，或者是只能输入字母等，这里有两种方法可以实现，第1种是可以用inputMask输入掩码属性来限制输入的内容，输入掩码就是使用一些特殊的字符来限制输入的格式和内容。

比如说设置inputMask：

inputMask: "AAAAAA"

就是代表只能输入6个字母类的字符。除了使用掩码，还可以使用整数验证器IntValidator、非整数验证器DoubleValidator和正则表达式验证器RegExpValidator的方法，如果你设置了validator的属性，用户只能输入validator所界定范围的字符。具体使用方法和前几节讲的一样，大家可以参考上几篇的内容。

TextField

1. TextInput的文本颜色使用color属性指定，TextField的文本颜色使用textColor属性指定。
2. TextInput没有背景，是透明的，能够与父控件无缝结合；而TextField有背景，其背景色可通过可视化项background来设置。
3. TextInput类的cursorDelegate属性可以用来定制编辑光标，而TextField没有

我们看一个自定义TextField的例程：

TextField {
    id: control
    placeholderText: qsTr("Enter description")
    anchors.centerIn: parent
    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 40
        color: "yellow"
        border.color: "black"
    }
}

总结