import QtQuick 2.0
FocusScope {
id: wrapper
property alias text: input.text //
property alias hint: hint.text //
property alias prefix: prefix.text //
property int font_size: 18 //定义字体大小
signal accepted
Rectangle {
anchors.fill: parent
border.color: "#707070"
color: "#c1c1c1"
radius: 4 //半径
Text {
id: hint //水印层文字显示
anchors { fill: parent; leftMargin: 14 }
verticalAlignment: Text.AlignVCenter //垂直对齐
text: "Enter word"
font.pixelSize: font_size //字体大小
color: "#707070"
opacity: input.length ? 0 : 1 //不透明度
}
Text {
id: prefix
anchors { left: parent.left; leftMargin: 14; verticalCenter: parent.verticalCenter }
verticalAlignment: Text.AlignVCenter //垂直对齐
font.pixelSize: font_size
color: "#707070"
opacity: !hint.opacity //和hint相反
}
TextInput {
id: input
focus: true
anchors { left: prefix.right; right: parent.right; top: parent.top; bottom: parent.bottom }
verticalAlignment: Text.AlignVCenter //垂直对齐
font.pixelSize: font_size
//color: "#707070"
color: "black"
onAccepted: wrapper.accepted() //链接到信号
}
}
}
用法如下:
LineInput
{
width: rect1.width * 0.8; height: rect1.height * 0.2
font_size:height * 0.7
anchors {horizontalCenter: rect1.horizontalCenter; bottom: btn_login.top; bottomMargin: rect1.height * 0.1}
hint: "请输入密码"
}