qml 行编辑输入控件 TextInput TextField


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

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项的宽度。仅当设置了显式宽度时，文本才会换行。

  • 方法
    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()，撤消上一次操作。

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

  • 例1
    在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    Row {
           spacing: 10
           anchors.centerIn: parent

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

           Rectangle {  //TextInput的可视化外观
               width: 100
               height: 27
               color: "lightgrey"
               border.color: "grey"

               TextInput{
                   anchors.fill: parent
                   anchors.margins: 2
                   font.pointSize: 14
                   focus: true
                   maximumLength: 6 //限制字符个数
               }
           }
       }
}

  • 例2
    在这里插入图片描述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    Row {
           spacing: 10
           anchors.centerIn: parent

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

           Rectangle {  //TextInput的可视化外观
               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)
                       }
                   }
           }
       }
}

TextField

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

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    Row {
           spacing: 10
           anchors.centerIn: parent

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

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