QML工作笔记-文本输入设置长度以及回显方式（TextInput与TextField通用）

目录

 

 

基本概念

代码及演示

---

 

基本概念

这是一个很常用到的功能，特意记录下：

一般输入框会用到2个，一个是TextInput一个是TextField。

因为TextInput加Rectangle如果太长会出现一种问题，就是Text会输入到Rectangle外面。

可以用TextField代替，也可以限制其长度！

 

TextInput和TextField中都含有一个属性：maximumLength

这个是运行的文本长度，超出长度会被截断TextInput的maximumLength的默认值为32767，而TextField没有默认。

 

下面是设置回显方式：

一TextInput为例：

• TextInput.Normal：直接显示文本（默认方式）；

• TextInput.Password：使用密码掩码字符（根据不同平台显示效果不同）来代替真实的字符；

• TextInput.NoEcho：不显示输入的内容；

• TextInput.PasswordEchoOnEdit：使用密码掩码字符，但在输入时显示真实字符。

 

 

代码及演示

输入如下：

点击登录按钮后：

对应的伪代码如下：

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 500
    height: 900
    title: qsTr("九州修仙大陆")


    Login{

        id: login
        width: parent.width
        height: parent.height
    }

}

用户名相关的qml

Rectangle {

    width: loginBtn.width * 1.5
    height: userNameInput.contentHeight + 5
    color: "white"
    border.color: "grey"

    TextInput {

        id: userNameInput
        anchors.fill: parent
        anchors.margins: 2
        font.pointSize: passwdNormalSize
        focus: true
        maximumLength: 12
    }
}

密码相关的qml

Rectangle {

    width: loginBtn.width * 1.5
    height: passwdInput.contentHeight + 5
    color: "white"
    border.color: "grey"
    anchors.horizontalCenter: passwdText.Center

    TextInput {

        id: passwdInput
        anchors.fill: parent
        anchors.margins: 2
        font.pointSize: passwdNormalSize
        focus: true
        anchors.horizontalCenter: passwdText.Center
        echoMode: TextInput.Password
    }
}

登录按钮相关的qml

Button {

    id: loginBtn
    width: textNormalWidth * 1.8
    height: textNormalSize
    text: qsTr("登录");

    onClicked: {

        console.debug("用户名：" + userNameInput.text + "   密码：" + passwdInput.text)
    }
}