14.Quick QML-TextInput详解

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,组件最大长度
  • 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
    width: 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 += "\n" + resultStr.replace(/name:/g,"");   // 删除"name:"
            }
            resultPrint.text = str;
        }
    }

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

效果如下所示:
14.Quick QML-TextInput详解

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

 

 

上一篇:Qt Creator添加3D视图


下一篇:快速排序