1. 前言

• 本代码为扫地僧-smile原创, 废话不多说, 直接看效果图由于录制的这个GIF图掉帧严重, 实际动画效果非常细腻

  

2.看代码

• 控件模块代码如下 SmileLineEdit.qml

import QtQuick
import QtQuick.Controls

/* __author__: 扫地僧-smile */

Rectangle {

    // 属性
    property int titleFontPixel: 15

    property int tipsFontPixel: 15
    property string tipsFontFamily: "微软雅黑"
    property string tipsText: "WebSite"

    property int borderWidth: 2
    property string borderInColor: "#3F80EA"
    property string borderOutColor: "#757575"
    property string borderColor: borderOutColor
    property int borderRadius: 5

    property int contentFontPixel: 15
    property string contentFontFamily: "微软雅黑"
    property string contentFontColor: "#3C4043"
    property int contentPadding: 10

    property int animationTime: 200

    property int maskWidth: 60

    id: root
    width: 300
    height: 50
    border { color: borderColor; width: borderWidth }
    radius: borderRadius

    Behavior on width {
        PropertyAnimation { duration: animationTime }
    }

    Rectangle {
        id: maskWidget
        height: 2
        width: 0
        x: contentPadding
        y: 0
        color: "#FFFFFFFF"
        Behavior on width {
            PropertyAnimation { duration: animationTime }
        }
    }

    Text {
        id: tipsWidget
        x: contentPadding
        y: 15
        text: tipsText
        font { family: tipsFontFamily; pixelSize: tipsFontPixel }
        color: borderColor
        scale: 1
        horizontalAlignment: Text.AlignHRight

        Behavior on y {
            PropertyAnimation { duration: 200 }
        }

        Behavior on scale {
            PropertyAnimation { duration: 200 }
        }
    }

     TextInput {
        id: contentWidget
        anchors.fill: root
        anchors.margins: contentPadding
        anchors.leftMargin: contentPadding
        verticalAlignment: TextInput.AlignVCenter
        color: contentFontColor
        font { family: contentFontFamily; pixelSize: contentFontPixel }

        onFocusChanged: {
            if (activeFocus) {
                borderColor = borderInColor
                maskWidget.width = maskWidth
                tipsWidget.y = -10
                tipsWidget.scale = 0.8
                root.width = 400
            } else {
                if (text === "") {
                    maskWidget.width = 0
                    tipsWidget.y = 15
                    tipsWidget.scale = 1.0
                    root.width = 300
                }
                borderColor = borderOutColor
            }
        }

        MouseArea {
            width: parent.width
            height: parent.height
            z: -1
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                cursorShape = Qt.PointingHandCursor
            }

            onExited: {
                cursorShape = Qt.ArrowCursor
            }
        }
    }
}

• 入口文件 main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 800
    height: 500
    visible: true
    title: "smile qml"

    ColumnLayout {
        id: mainLayout
        anchors.centerIn: parent
        spacing: 50

        SmileLineEdit {
            tipsText: "WebSite"
        }

        SmileLineEdit {
            tipsText: "电子邮箱"
        }
    }
}