14.Quick QML-TextInput和TextField详解

1.TextInput属性
用来编辑一行文本,对应QLineEdit,除了正常输入外,我们还可以设置echoMode属性改为密码显示状态,也可以通过validator属性和inputMask属性来设置验证器或输入掩码,来限制文本输入内容.也可以设置selectByMouse为true,让鼠标支持编辑选中的文本区域....等等.它的属性是非常非常的多,要想熟练使用该组件,我们还是有必要过滤一遍.
TextInput的属性如下所示:

• acceptableInput : bool,只读属性,用来获取当前输入的内容是否合法的输入,默认始终为true,如果我们设置了validator属性和inputMask属性,那么该值则为false,除非当前文本框内容满足输入的要求才会为true
• inputMask : string,用来设置输入掩码，限制允许的文本输入,具体参考QLineEdit::inputMask,比如:
  • A:必须输入A-Z,a-z
  • a:可以输入A-Z,a-z,或者也可以忽略
  • N:必须输入A-Z,a-z,0-9
  • n:可以输入A-Z,a-z,0-9,或者也可以忽略
  • X:支持任何字符
  • x:可以输入任何字符,或者也可以忽略
  • 9:只能输入数字0-9
  • 0:可以输入数字0-9,或者也可以忽略
  • B:只能输入二进制数0或者1
• 比如:
  • inputMask: "0000.00.00": 此时acceptableInput始终为true,因为0表示可以输入0-9,也可以忽略不输入,
  • inputMask: "出生日期:9999-99-99": 那么acceptableInput为false,比如我们输入具体日期后,才会为true
• activeFocusOnPress : bool,默认值为ture,表示当鼠标按下,TextInput时则获得活动焦点(显示光标).设置为false,则鼠标按下,也无法编辑TextInput,除非我们设置了focus属性为true,让它始终获取焦点.
• autoScroll : bool,当文本长于宽度时，TextInput是否应滚动。默认为true,若设为false,如果超过宽度,并且clip为true的情况下,则无法滚动到我们输入的字符位置处
• bottomPadding : real,底部内边距
• canPaste : bool,只读属性,用来表示TextInput是否可以被粘贴,只有当TextInput是可写状态,并且剪贴板的内容符合格式要求,则返回true
• canRedo : bool,只读属性,是否可以重做撤消操作,如果支持则返回true
• canUndo : bool,只读属性,是否可以撤消操作,如果支持则返回true
• color : color,文本颜色
• contentHeight : real,只读属性,用来获取文本的高度,需要注意的是文本的高度取决于font.pixelSize大小,而不是组件的height
• contentWidth : real,只读属性,用来获取文本的宽度(不是一个字符的宽度,而是当前输入的所有字符的宽度)
• cursorDelegate : Component,光标委托,用来设置自定义的光标,并且委托组件的根项必须是QQuickItem或QQuickItem派生类
• cursorPosition : int,光标在TextInput的位置(不是像素点位置,以I表示光标,比如012I3,cursorPosition=3,I0123,cursorPosition=0)
• cursorRectangle : rectangle,只读属性,用来获取光标的像素坐标和大小
• cursorVisible : bool,光标是否显示,我们也可以自己设置它，比如:

• TextInput {
      text:"TextInput"
      onCursorVisibleChanged: {
          cursorVisible = true // 就算我们取消焦点后,光标也会一直显示
      }
  }    

• displayText : string,只读属性,用来获取当前显示的文本,如果echoMode为TextInput.Password,那么获取的显示文本始终为●●●●
• echoMode : enumeration,指定文本应如何在TextInput中显示,取值有以下几种:
  • TextInput.Normal - 按原样显示文本。（默认）
  • TextInput.Password - 显示与平台相关的密码掩码字符"●"，而不是实际字符。
  • TextInput.NoEcho - 不显示任何内容。
  • TextInput.PasswordEchoOnEdit - 编辑时显示输入的字符,未编辑是显示平台相关的密码掩码字符"●"
• font.bold : bool,是否粗体
• font.capitalization : enumeration,设置文本显示大写字母,取值有以下几种:
  • Font.MixedCase - 默认,普通文本呈现
  • Font.AllUppercase - 将所有字母显示为大写(只改变显示内容,但是text内容不会被改变)
  • Font.AllLowercase - 将所有字母显示为小写(只改变显示内容,但是text内容不会被改变)
• font.family : string,设置字体族
• font.italic : bool,是否斜体
• font.kerning : bool,字距调整功能,默认为true,设置false,会提高创建文本速度,但是会会牺牲一些外观功能
• font.letterSpacing : real,设置单个字母间的默认间距.正值将字母间距增加相应像素；负值将减少间距。
• font.pixelSize : int,像素大小
• font.pointSize : real,字体大小
• font.strikeout : bool,是否显示删除线
• font.styleName : string,字体风格名称.
• font.underline : bool,是否显示下划线
• font.weight : enumeration,字体的权重,比如设置为Font.Bold,表示字体是粗体
• font.wordSpacing : real,设置每个单词间的间距
• horizontalAlignment : enumeration,设置水平文本对齐方式
• verticalAlignment : enumeration,设置垂直文本对齐方式
• inputMethodHints : enumeration,向qml虚拟键盘提示显示不同的输入方式, 比如Qt.ImhUppercaseOnly(提示虚拟键盘只显示大写字母)
• leftPadding : real,左侧内边距
• length : int,返回当前文本的字符长度
• maximumLength : int,设置当前文本最大的字符长度,如果文本长度超过该值,则会被截断,默认值为32767
• overwriteMode : bool,覆盖模式,默认为false,输入文本时,是插入光标位置处,如果为true,则是将覆盖当前文本
• padding : real,内边距
• passwordCharacter : string,自定义显示的密码掩码字符,比如默认显示的是"●",如果我们设置passwordCharacter为"*",那么显示的密码掩码就是*
• passwordMaskDelay : int，设置可见字符被密码字符屏蔽之前的延迟，以毫秒为单位,设置undefined则表示没有延迟.
• readOnly : bool,设置是否只读,默认为false
• rightPadding : real,右侧内边距
• selectByMouse: 默认为false,设置为true,则可以通过鼠标来编辑选中文本区域
• selectionStart : int,只读属性,获取当前选中的第一个字符之前的光标位置,比如:**000***(0表示选中的意思,*表示未选中的意思),那么返回2
• selectionEnd : int,只读属性,获取当前选中的最后一个字符之后的光标位置,如果我们要更改选中的位置,可以使用 select(start,end), selectAll()或者selectWord().
• selectedText : string,只读属性,获取当前选定中的文本,它比text.toString().substring(selectionStart,selectionEnd)效率更快
• selectedTextColor : color,设置当前选定中的文本颜色
• selectionColor : color,设置当前选定中的文本背景颜色
• text : string,用户输入的文本,也可以自己设置
• topPadding : real,顶部内边距
• validator : Validator,验证器,设置后,只有当按下enter键后,如果文本符合验证要求,才会发射accepted信号,目前支持的验证器有IntValidator、DoubleValidator、RegExpValidator和RegularExpressionValidator
• wrapMode : enumeration,包装模式,设置为TextInput.Wrap时,表示宽度不足时,可以换行

2.TextInput信号

TextInput的信号如下所示:

• accepted() : 当按下返回或Enter键时，会发出此信号。请注意，如果文本输入上设置了validator或inputMask，则只有在输入处于可接受状态时，才会发出信号。
• editingFinished() :当按下返回或Enter键或文本输入失去焦点时，会发出此信号。请注意，如果文本输入上设置了验证器或inputMask，并且按了enter/return，则只有在输入跟随inputMask并且验证器返回可接受状态时，才会发出此信号。
• textEdited() : 每当编辑文本时，就会发出此信号。与textChanged()不同，例如，通过直接更改text值或调用clear()，不会发出此信号。

3.TextInput方法

TextInput的方法如下所示:

• clear() : 清除文本输入的内容
• copy() : 将当前选定的文本复制到系统剪贴板,如果echoMode不等于TextInput.Normal，则复制将无法工作。避免密码被盗
• cut() : 将当前选定的文本移动到系统剪贴板,如果echoMode不等于TextInput.Normal，则无法工作。避免密码被盗
• deselect() : 取消当前选中
• ensureVisible(position) : 指定可见的位置,如果clip为true,并且文本超过宽度,则可以通过该方法,滚动到要显示的位置处
• string getText(start, int end) : 获取start和end之间的文本部分。
• insert(position, string text) : 在position位置处插入文本
• moveCursorSelection(position, SelectionMode mode) : 移动光标选中的功能,从cursorPosition到position处（如果仅移动光标，设置cursorPosition属性即可）,mode取值有:
  • • TextInput.SelectCharacters : position以每个字符单位
    • TextInput.SelectWords: position以每个单词为单位
• paste() : 将当前系统剪贴板的内容粘贴到选中的文本或者光标编辑位置处.
• int positionAt(x, real y, CursorPosition position) : 获取x和y像素点所在字符在文本中的位置.position取值有:
  • • TextInput.CursorBetweenCharacters ：返回字符之间最接近x像素点的位置(默认值),就和光标一样,鼠标点在哪个位置,那么光标就会出现在最近的字符之间位置附近.
    • TextInput.CursorOnCharacter: 返回最接近x的字符之前的位置。
• rect positionToRectangle(pos) : 获取pos位置处的光标应该占用的像素点位置和大小,pos为字符位置(不是像素点位置).
• redo() : 重做
• remove(start, int end) : 删除start和end之间的文本部分。
• select(start, int end) : 选中start和end之间的文本部分,如果start或end超出范围，则不会更改选择。
• selectAll() : 全选
• selectWord() : 选中最接近当前光标位置的单词
• undo() : 撤销

4.validator验证器属性介绍
目前支持的验证器有IntValidator、DoubleValidator、RegExpValidator和RegularExpressionValidator,并且当按下enter键后,如果文本符合验证要求,才会发射accepted信号

IntValidator(整数验证器)
IntValidator用来为整数值提供验证器, 如果未设置验证的区域，IntValidator将只接受正负号(正负号必须在文本开头)和数字、IntValidator的属性有bottom(整数的下限值)、top(整数的上限值)
示例如下所示(输入10-99的值):

TextInput {
        anchors.fill: parent
        validator: IntValidator{
            bottom: 10
            top: 99
        }

        onAccepted: {
            console.log("你输入的值为:"+text);
        }
    } 

当我们输入文本符合验证要求时,则打印log.

DoubleValidator(双精度浮点数验证器)
通过bottom和top 来设置输入范围, 通过decimals 来设置小数位个数;
示例如下所示:

TextInput {
        anchors.fill: parent
        validator: DoubleValidator {
            decimals: 2
            bottom: 10
            top: 99
        }

        onAccepted: {
            console.log("你输入的值为:"+text);
        }
 }

RegularExpressionValidator (正则表达式验证器)
比如:

• /name:(.+?);/gi

最前面的“/”与最后面的“/”是分隔符，表示正则表达式的开始与结束。所以正则表达式匹配的内容是" str(.+?);"，而"+?"表示是至少重复一次或者多次的意思,所以匹配的内容是name:开头，";"结尾的匹配项。
而"g"表示的是全局匹配,可以匹配到多次的情况,如果不加"g"，那么result的匹配项最多只能有1个，i表示表示忽略大小写（ignoreCase，）、相关的标志还有m（multiline，表示允许跨行）
示例如下所示:

Window {
    id: wind
     550;
    height: 400;
    visible: true;
    Text {
        id: hint
        color: "red"
        font.pixelSize : 20
        text: "请输入成员名字,以"name:"开头,以";"隔开:"
    }
    TextInput {
        id: input
        property var regx: /name:(.+?);/gi
        anchors.top: hint.bottom
        focus: true
        font.pixelSize : 20
        validator: RegularExpressionValidator {
            regularExpression: input.regx
        }
        onAccepted: {
            var result = text.match(input.regx);

            var str = "成员数量为:"+result.length
            for (var i in result) {
                var resultStr = result[i].replace(/ /g,"");  // 删除空格
                str += "
" + resultStr.replace(/name:/g,"");   // 删除"name:"
            }
            resultPrint.text = str;
        }
    }

    Text {
        id: resultPrint
        anchors.top: input.bottom
        anchors.topMargin: 40
        font.pixelSize : 20
        color: "green"
        text: "等待结果"
    }
}

效果如下所示:

可以看到我们就算加了"---"干扰字符,也可以识别出来.并且由于加了"g"全局匹配符,所以找到了3个成员,如果不加g,则只会匹配一次.

5.TextInput设置背景色、边框色

我们可以将TextInput放在Rectangle中,即可实现这些功能,示例如下所示:

Rectangle {
         100
        height: 24
        color: "lightgrey"
        border.color: "green"
        border. 2

        TextInput {
            anchors.fill: parent
            anchors.margins: 2
            color: "red"
            selectedTextColor : "blue" // 选中的文本颜色
            selectionColor : "yellow"   // 选定中的文本背景颜色
            font.pointSize: 15
            focus: true
            clip: true  // 必须设置clip为true,否则文本会超出边框
        }
    }

效果如下所示:

其实使用TextField,会更加方便。

6.TextField

和TextInput非常相似,但是TextField可以设置背景色、边框色、提示句(字段为空时显示的文本).
它比TextInput多了下面几个属性

• placeholderText : string,提示句(字段为空时显示的文本)
• textColor : color,设置文本颜色,等价于TextInput的color属性
• style: TextFieldStyle,设置样式(比如:border、radius、placeholderTextColor(字段为空时的文本颜色等)

TextFieldStyle样式介绍
TextFieldStyle用来自定义我们想要的TextField的样式.它的属性如下所示:

• background : Component,设置字段的背景,比如Rectangle
• control : TextField,只读属性,用来获取当前附加在哪个TextField上面
• font : font,设置字体.
• passwordCharacter : string,设置密码掩码字符.当TextField的echoMode属性为TextInput.Password或TextInput.PasswordEchoOnEdit时生效
• placeholderTextColor : color,字段为空时的提示文本颜色
• selectedTextColor : color,选中的文本颜色
• selectionColor : color,选中的文本背景颜色
• textColor : color ,设置文本颜色,相当于设置TextField的textColor属性

示例如下所示:

TextField {
          style: TextFieldStyle {
              font.pixelSize: 20
              textColor: "black"
              selectedTextColor: "yellow"
              selectionColor: "red"
              background: Rectangle {
                  radius: 2
                  implicitWidth: 200
                  implicitHeight: 30
                  border.color: "green"
                  border. 1
              }
          }
}

效果如下所示: