Qml：qml写个登录

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
/*
1 核心控件和窗口布局和登录事件处理
    文本说明：登录系统
    用户名：username
    密码: password
    登录按钮: submit
    登录事件处理
        onClicked
2 样式优化、背景渐变、图标自动替换
    2.1 窗口背景渐变色
    2.2 居中矩形设置
    2.3 插入图片
    2.4 输入框和字体颜色设置、提示文字设置
    2.5 动态图标插入
    2.6 按钮动态颜色设置
3 窗口拖动、去掉原有标题栏、做圆角窗口课拖动
    3.1 关闭窗口的按钮
    3.2 隐藏标题栏圆角窗口可拖动
4 动画事件、控件动态出现、图片转动动画
    4.1 控件的动态出现
    4.2 图片转动动画、用状态维护动画
*/
ApplicationWindow
{
    width: 1280
    height: 800
    visible:true //默认窗口不显示
    title:"login UI"
    id:root
    flags:Qt.FramelessWindowHint
    color:  "#00000000" //背景透明

    property int dragX: 0
    property int dragY: 0
    property bool dragging: false

    Rectangle
    {
        width: parent.width
        height: parent.height
        radius:10
        gradient:Gradient
        {
            GradientStop//开始颜色
            {
                position:0
                color:"#4158d0"
            }
            GradientStop//结束颜色
            {
                position:1
                color:"#c850c0"
            }
            orientation:Gradient.Horizontal
        }
        Rectangle
        {
            width:800
            height:500
            anchors.centerIn:parent
            radius:10
            MouseArea
            {
                width:parent.width
                height:100
                onPressed:
                {
                    root.dragX = mouseX
                    root.dragY = mouseY
                    root.dragging = true
                }
                onReleased:root.dragging = false
                onPositionChanged:
                {
                    if(root.dragging)
                    {
                        root.x+=mouseX-root.dragX
                        root.y+=mouseY-root.dragY
                    }
                }
            }
            Image
            {
                id: image
                x:57
                y:100
                source:"images/img-01.png"

                states:[
                    State
                    {
                        name:"rotated"
                        PropertyChanges
                        {
                            target:image
                            rotation: 180
                        }
                    }
                ]
                transitions:Transition
                {
                    RotationAnimation
                    {
                        duration:1000
                        direction:RotationAnimation.Counterclockwise
                    }
                }
                MouseArea
                {
                    anchors.fill:parent
                    onClicked:
                    {
                        if(image.state == "rotated")
                        {
                            image.state = ""
                        }
                        else
                        {
                           image.state = "rotated" 
                        }
                    }
                }
            }

            Text
            {
                x:530
                y:130
                width: 120
                height: 30
                font.pixelSize:24
                text:qsTr("登录系统")
                color: "#333333"
            }

            TextField
            {
               id:username
               x:440
               y:200
               width:300
               height:50
               font.pixelSize:20
               placeholderText:qsTr("用户名或邮箱")
               placeholderTextColor:"#999999"
               leftPadding: 60
               background:Rectangle
               {
                    radius:25
                    color: "#e6e6e6"
                    border.color: "#e6e6e6"
               }

               Image
               {
                    source:username.activeFocus?"images/u2.png":"images/u1.png"
                    width: 20
                    height: 20
                    x:30
                    y: 15
               }
               NumberAnimation on y
               {
                    from:username.y-100
                    to:username.y
                    duration:300
               }
               NumberAnimation on x
               {
                    from:username.x-100
                    to:username.x
                    duration:300
               }
            }

            TextField
            {
                id:password
                x:username.x
                y:username.y+username.height +10
                width:300
                height:50
                font.pixelSize:username.font.pixelSize
                echoMode:TextField.Password
                leftPadding: username.leftPadding
                placeholderText: qsTr("密码")
                placeholderTextColor: username.placeholderTextColor //提示词颜色
                color: username.color   //输入词颜色
                background: Rectangle
                {
                    color: username.background.color
                    border.color: username.background.color
                    radius: 25
                }

                Image
                {
                    source:password.activeFocus?"images/p2.png":"images/p1.png"
                    width: 20
                    height: 20
                    x:30
                    y: 15
                }
            }

            Button
            {
                id:submit
                x:username.x
                y:password.y+password.height+10
                width:username.width
                height:username.height
                text:qsTr("登录")
                font.pixelSize:20
                onClicked:{
                    print("登录"+username.text+":"+password.text)
                }
                background:Rectangle
                {
                    radius:25
                    color:
                    {
                        if(submit.down)
                            return "#00b846"
                        if(submit.hovered)
                            return "#333333"
                        return "#57b846"
                    }
                }
            }
        }
        Rectangle
        {
            x: root.width-35
            y: 5
            width: 30
            height: 30
            color: "#00000000"
            Text
            {
                text: "×"
                font.pixelSize:28
                anchors.centerIn:parent
 
            }
            MouseArea
            {
                anchors.fill:parent
                hoverEnabled: true
                onEntered: 
                {
                    parent.color = "#1BFFFFFF"
                }
                onExited: parent.color =  "#00000000"
                onPressed: parent.color =  "#3BFFFFFF" 
                onReleased: parent.color =  "#1BFFFFFF" 
                onClicked: 
                {
                    root.close()
                }
            }
        }
    }
}

链接

推荐一个零声学院项目课，个人觉得老师讲得不错，分享给大家：
零声白金学习卡（含基础架构/高性能存储/golang云原生/音视频/Linux内核）
https://xxetb.xet.tech/s/3Zqhgt