qml自定义输入框

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: "请输入密码"
            }