一文看明白QML输入框的动画制作Python PySide6 Qt6 QML LineEdit 输入框

本文主要是介绍一文看明白QML输入框的动画制作Python PySide6 Qt6 QML LineEdit 输入框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 前言

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

  

2.看代码

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

import QtQuick
import QtQuick.Controls/* __author__: 扫地僧-smile */Rectangle {// 属性property int titleFontPixel: 15property int tipsFontPixel: 15property string tipsFontFamily: "微软雅黑"property string tipsText: "WebSite"property int borderWidth: 2property string borderInColor: "#3F80EA"property string borderOutColor: "#757575"property string borderColor: borderOutColorproperty int borderRadius: 5property int contentFontPixel: 15property string contentFontFamily: "微软雅黑"property string contentFontColor: "#3C4043"property int contentPadding: 10property int animationTime: 200property int maskWidth: 60id: rootwidth: 300height: 50border { color: borderColor; width: borderWidth }radius: borderRadiusBehavior on width {PropertyAnimation { duration: animationTime }}Rectangle {id: maskWidgetheight: 2width: 0x: contentPaddingy: 0color: "#FFFFFFFF"Behavior on width {PropertyAnimation { duration: animationTime }}}Text {id: tipsWidgetx: contentPaddingy: 15text: tipsTextfont { family: tipsFontFamily; pixelSize: tipsFontPixel }color: borderColorscale: 1horizontalAlignment: Text.AlignHRightBehavior on y {PropertyAnimation { duration: 200 }}Behavior on scale {PropertyAnimation { duration: 200 }}}TextInput {id: contentWidgetanchors.fill: rootanchors.margins: contentPaddinganchors.leftMargin: contentPaddingverticalAlignment: TextInput.AlignVCentercolor: contentFontColorfont { family: contentFontFamily; pixelSize: contentFontPixel }onFocusChanged: {if (activeFocus) {borderColor = borderInColormaskWidget.width = maskWidthtipsWidget.y = -10tipsWidget.scale = 0.8root.width = 400} else {if (text === "") {maskWidget.width = 0tipsWidget.y = 15tipsWidget.scale = 1.0root.width = 300}borderColor = borderOutColor}}MouseArea {width: parent.widthheight: parent.heightz: -1anchors.fill: parenthoverEnabled: trueonEntered: {cursorShape = Qt.PointingHandCursor}onExited: {cursorShape = Qt.ArrowCursor}}}
}

• 入口文件 main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsWindow {width: 800height: 500visible: truetitle: "smile qml"ColumnLayout {id: mainLayoutanchors.centerIn: parentspacing: 50SmileLineEdit {tipsText: "WebSite"}SmileLineEdit {tipsText: "电子邮箱"}}
}

这篇关于一文看明白QML输入框的动画制作Python PySide6 Qt6 QML LineEdit 输入框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---