QML学习之基本元素TextInput, TextField, TextEdit, TextArea介绍

    本文主要介绍基本元素TextInput, TextField, TextEdit, TextArea等的基本属性。

1) 行编辑

       Qt Quick提供了两个行编辑控件，即Textlnput与TextField。

A) TextInput

       TextInput用于编辑一行文本，类似于QLineEdit。支持使用validator或inputMask对输入文本做范围限制。Textlnput目前支持IntValidator、DoubleValidator、RegExpValidator，如果你设置了validator的属性，用户只能输入validator所界定范围的字符。inputMask是个字符串，用来限制你可以输入的字符，可以参考QLineEdit::inputMask来了解详情。掩码串内包含允许的字符和分隔符，后面还可以跟一个可选的分号，以及一个用上补空白的字符。例如“2016-12-23”。

        TextInput可以设置echoMode实现密码框的效果。假如你想使用Textlnput来输入密码，可以设置echoMode属性为 Textlnput.Password, TextInput.PasswordEchoOnEdit或TextInput.NoEcho，而echoMode默认为TextInput.Normal , 即输入什么显示什么。如果echoMode不为Textlnput.Normal，那么displayText属性就保存显示给用户的文本，而text属性则保存实际输入的文本，比如你设定passwordCharacter为"*", echoMode为TextInput.Password，那么displayText属性内保存的就是一串"*"。

       font分组属性允许你设置TextInput元素所用字体的各种属性，包括字体族(family )、大小(pixelSize.  pointSize)、粗细(bold, weight)、斜体(italic)、下划线(underline)等。与Text属性一样，text可以获取到元素的文本，horizontalAlignment和verticalAlignment用于设定文本对齐方式，wrapMode设置文本超过控件宽度时换行策略，color设置文字颜色，contentWidth , contentHeight返回文本的宽、高。不过，TextInput不支持使用HTML标记的富文本。

       length属性返回编辑框内的字符个数，使用它比通过text属性取得文本再调用String对象的length方法效率要高很多。maximumLength设置编辑框允许输入的字符串的最人长度，超过这个长度就会被截断。

       TextInput的cursor就是光标，可以通过cursorDelegate来定制它的外观，而QLineEdit的cursor样子很难定制。cursorPosition可以设置或返回光标位置；cursorVisible设置或返回光标的可见状态。cursorRectangle是只读属性，当cursorRectangle变化尺寸，返回光标所在矩形，定制的cursorDelegate会受这个属性影响，cursorDelegate的尺寸和位置会跟着变化。

        Textlnput允许用户选择文本，如果selectByMouse属性设置为true，月户就可以使用鼠标来选择编辑框内的文字。selectedText是只读属性，保存用户选中的文字。selectionStart, selectionEnd表示选中的起、止位置; selectedTextColor表示选中的文本颜色，而selectionColor则表示选中框的颜色。

则表示选中框的颜色。当用户按了回车键或确认键，或者编辑框失去焦点时，会发出accepted和editingFinished信号，开发者可以实现onAccepted 和 onEditingFinished信号处理器来处理。注意，如果设置了inputMask或validator, 那么只有在编辑框内的文本符合限制条件时这两个信号才会触发。

    TextInput还支持粘贴(canPaste)、撤销(canUndo ) ,重做(canRedo )、滚动(autoScroll )等特性，也有一些方法如copy(), cut(), insert(), select(), getText()等。

B) TextField

    基本属性与TextInput类似。下面只说不同之处。

    (a)文本颜色

    TextInput的文本颜色使用color属性指定，TextField的文本颜色使用textColor属性指定。

    (b)背景色

    TextInput没有背景，是透明的，能够与父控件无缝结合；而TextField有背景，其背景色可通过TextFieldStyle的(Component类型的)background属性来设定，其他属性都一样。Qt 助手上给出了使用TextField Style的例子:

  TextField {
      style: TextFieldStyle {
          textColor: "black"
          background: Rectangle {
              radius: 2
              implicitWidth: 100
              implicitHeight: 24
              border.color: "#333"
              border.width: 1
          }
      }
  }

    (c)是否可以定制cursor

    TextInput类的cursorDelegate属性可以用来定制编辑光标，而TextField没有。

2) 文本块

    Qt Quick中有两个块编辑控件，即TextEdit和TextArea。

    A) TextEdit

    TextEdit是Qt Quick提供的多行文本编辑框，它的大多数属性与TextInput类似。下面仅介绍主要的内容。

    textDocument属性，可以结合QSyntaxHighlighter来实现语法高亮。

    textFormat用于指定文本格式，是纯文本(TextEdit.PlainText )、富文本(TextEdit.RichText )还是自动检测(TextEdit.AutoText )，默认值是TextEdit.PlainText。lineCount属性返回编辑框内的文本行数。因为支持富文本，TextEdit还有linkActivated信号，在用户点击文本中内嵌的链接时触

发，linkHovered信号在鼠标悬停在文本内嵌的链接上方时触发。

    当一行文本要占用的宽度大于TextEdit的宽度时，wrapMode决定如何折行，它支持TextEdit.WordWrap(在单词边界处折行)、TextEdit.NoWrap(不折行，超出宽度的文本不显示)、TextEdit.WrapAnywhere(折行，不考虑单词边界)、TextEdit. Wrap(折行，尽量在单词边界处折行)4种换行策略。

    修改文本可以使用append(), insert(), cut(), paste(), remove()等方法，获取文本可以使用getText方法或者text属性。

    特别注意： TextEdit, TextInput, Text等元素虽不能定制背景，但是可以通过再这些对象的底下放置一个z序更小的Rectangled对象来实现背景的设置。

    B) TextArea

    TextArea基本属性与TextEdit类似，我们只说不同之处。

    (a)文本颜色

    TextEdit的文木颜色使用color属性指定，TextArea的文本颜色使用textColor属性指定。

    (b)背景色

    TextEdit没有背景，是透明的，能够与父控件无缝结合。而TextArea有背景，其背景色可通过TextAreaStyle的(color类型的)background属性来设定。下面是Qt助手上给出的例子。

  TextArea {
      style: TextAreaStyle {
          textColor: "#333"
          selectionColor: "steelblue"
          selectedTextColor: "#eee"
          backgroundColor: "#eee"
      }
  }

    (c)背景色

    与TextInput类似，TextEdit也有cursorDelegate属性，TextArea没有。

    (d)文本滚动

     TextArea继承自ScrollView, 可以支持上下方向键(非只读模式)、翻页键以及鼠标中键的滚动。