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