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() } } } } }