1、前期准备
Label
文本设置、字体设置
text: "登入密码"
font.family: "微软雅黑"
font.pixelSize: 20
TextField
cursorVisible: true
selectByMouse: true //鼠标选择,输入错误可以全选一次删除
selectionColor: "red" //选中时的颜色显示
placeholderText: qsTr("请输入登入密码")
-
echoMode: TextInput.Normal
指定文本在 TextInput 中的显示方式。
- TextInput.Normal:按原样显示文本。 (默认)
- TextInput.Password:显示平台相关的密码掩码字符而不是实际字符。
- TextInput.NoEcho:不显示任何内容。
- TextInput.PasswordEchoOnEdit:显示编辑时输入的字符,否则与 TextInput.Password 相同。
2、代码
Fjf_Login.qml
import QtQuick 2.0
import QtQuick.Controls 2.2
Item {
property alias fontSize: textField.font.pixelSize
property alias selectColor: textField.selectionColor
property alias fontShow: textField.placeholderText
property alias echoModeTmp: textField.echoMode
TextField {
id: textField
//文字是水平居中的,靠主窗口上方
verticalAlignment: Text.AlignVCenter
font.pixelSize: 12
font.family: "微软雅黑"
color: "white"
cursorVisible: true
selectByMouse: true //鼠标选择,输入错误可以全选一次删除
selectionColor: "red" //选中时的颜色显示
placeholderText: qsTr("请输入登入密码")
echoMode: TextInput.Normal
width: 280
height: 40
background: Rectangle {
border.width: 0
radius: 4
color: "blue"
opacity: 0.05
implicitHeight: 40
implicitWidth: 280
}
}
}
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: "登入界面"
color: "silver"
Label {
id: label_1
anchors.top: parent.top
anchors.topMargin: 108
anchors.right: fjf_1.left
anchors.rightMargin: 10
text: "登入账号"
font.family: "微软雅黑"
font.pixelSize: 20
}
Fjf_Login {
id: fjf_1
anchors.top: parent.top
anchors.topMargin: 100
anchors.left: parent.left
anchors.leftMargin: 200
fontShow: "请输入登入账号"
}
Label {
id: label_2
anchors.top: parent.top
anchors.topMargin: 188
anchors.right: fjf_2.left
anchors.rightMargin: 10
text: "登入密码"
font.family: "微软雅黑"
font.pixelSize: 20
}
Fjf_Login {
id: fjf_2
anchors.top: parent.top
anchors.topMargin: 180
anchors.left: parent.left
anchors.leftMargin: 200
echoModeTmp: TextInput.Password
fontShow: "请输入登录密码"
}
Button {
id: button_1
anchors.top: parent.top
anchors.topMargin: 300
anchors.left: parent.left
anchors.leftMargin: 100
width: 100
height: 30
background: Rectangle {
height: 30
width: 100
color: button_1.down ? "silver" : "gray"
Text {
anchors.centerIn: parent
text: "确定"
font.pixelSize: 16
}
}
}
Button {
id: button_2
anchors.top: parent.top
anchors.topMargin: 300
anchors.left: parent.left
anchors.leftMargin: 400
width: 100
height: 30
background: Rectangle {
height: 30
width: 100
color: button_2.down ? "silver" : "gray"
Text {
anchors.centerIn: parent
text: "取消"
font.pixelSize: 16
}
}
}
}