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
  

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
  

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没有

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"
               }
           }
       }
}