QML-编辑框的使用

一、TextInput

Textinput 类似于 QLineEdit，除了显示光标和文本外，默认并没有边框等装饰性效果，所以在使用时一般要为其添加Rectange可视化的外观。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.2

Window {
    id:root
    visible: true
    width: 600
    height: 500
    title: qsTr("文本编辑框")

    Label{
        id:label_1
        text: qsTr("请输入:")
        anchors.centerIn: parent
        font.pointSize: 15
    }

    Rectangle{

        // 这里添加自适应，要不让输入框字符串过多的时候
        // 显示会超出编辑框
        width: input.contentWidth<100 ? 100 : input.contentWidth + 10
        height: input.contentHeight + 5

        color: "lightgrey"
        border.color: "grey"
        anchors.left: label_1.right
        anchors.top: label_1.top

        TextInput{
            id:input
            anchors.fill: parent
            anchors.margins: 2
            font.pixelSize: 15
            focus: true
        }
    }

}

1、添加自适应

如果不添加自适应，输入字符串过多的情况下，字符会超出控件，现象如下

所以需要添加下面这个关键部分

2、设置掩码

inputMask 来限制输入的内容，输入掩码就是使用一些特殊的字符来限制输入的格式和内容。

3、添加密码显示

echoMode 属性指定了文本的显示方式，可用的方式有：

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

4、编辑完成事件

5、添加过滤

使用正则表达式，也可以使用qt自带的，例如：
IntValidator 、DoubleValidator（非整数验证器）和RegExpValidator（正则表达式验证器）。下面的代码可以限制在 TextInput 中只能输入 0到 1000之间的整数：

二、TextField

TextField使用起来比较直接，也是推荐使用这个，不需要你过多重新造轮子

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.2

Window {
    id:root
    visible: true
    width: 500
    height: 200
    title: qsTr("文本编辑框")

Row{
    anchors.centerIn:parent
    spacing: 20

    Label{
        id:label_1
        text: qsTr("请输入:")
        font.pointSize: 15
    }

    TextField{
        id:textFiled_1
        placeholderText: qsTr("输入你个人密码")
        font.pointSize: 15
        background: Rectangle{
            implicitHeight: 24
            implicitWidth: 200
            color: "grey"
            border.color: "black"
        }

    }

}

}