Hello World
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Text {
id: name
height: 300
width: 400
text: qsTr("hello world")
}
}
核心控件和窗口布局
- 核心控件和窗口布局和登录事件处理
- 文本说明：登录系统
- 用户名：username
- 密码: password
- 登录按钮: submit
- 登录事件处理：onClicked
Window {
width: 1280
height: 800
visible: true // 默认窗口不显示
title: "login"
id: root
Text {
x: 580
y: 130
width: 120
height: 30
font.pixelSize: 24
text: qsTr("Login")
}
TextField {
id: username
x: 440
y: 200
width: 300
height: 50
font.pixelSize: 20
}
TextField {
id: password
x: username.x
y: username.y + username.height + 20
width: username.width
height: username.height
font.pixelSize: username.font.pixelSize
echoMode: TextInput.Password
}
Button {
id: submit
x: username.x
y: password.y + password.height + 20
width: username.width
height: username.height
font.pixelSize: 25
onClicked: { // 处理事件
print("login" + username.text + ":" + password.text)
}
}
}
图片资源和输入框定制
- 核心控件和窗口布局和登录事件处理
- 文本说明：登录系统
- 用户名：username
- 密码: password
- 登录按钮: submit
- 登录事件处理：onClicked
- 样式优化、背景渐变、图标自动替换
- 窗口背景渐变色
- 居中矩形设置
- 插入图片
- 输入框和字体颜色设置、提示文字设置
- 动态图标插入
- 按钮动态颜色设置
Window {
width: 1280
height: 800
visible: true // 默认窗口不显示
title: "login"
id: root
Rectangle {
width: parent.width
height: parent.height
anchors.centerIn: parent // 居中
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
Image {
x: 57
y: 100
source: "./images/img-01.png"
}
Text {
x: 530
y: 130
width: 120
height: 30
font.pixelSize: 24
text: qsTr("Login")
color: "#FF0000"
}
TextField {
id: username
x: 440
y: 200
width: 300
height: 50
font.pixelSize: 20
placeholderText: qsTr("请输入用户名") // 提示词内容
placeholderTextColor: "#999999" // 提示词颜色
color: "#666666"
leftPadding: 60
background: Rectangle {
color: "#e6e6e6"
border.color: "#e6e6e6"
radius: 25
}
Image {
source: username.activeFocus?"images/u2.png":"images/u1.png"
width: 20
height: 20
x:30
y: 15
}
}
TextField {
id: password
x: username.x
y: username.y + username.height + 20
width: username.width
height: username.height
font.pixelSize: username.font.pixelSize
echoMode: TextInput.Password
color: "#666666"
leftPadding: 60
background: Rectangle {
color: "#e6e6e6"
border.color: "#e6e6e6"
radius: 25
}
Image { // 图片资源
source: password.activeFocus ? "images/p2.png" : "images/p1.png"
width: 20
height: 20
x: 30
y:15
// source: "file"
}
}
Button {
id: submit
x: username.x
y: password.y + password.height + 20
width: username.width
height: username.height
font.pixelSize: 25
onClicked: { // 处理事件
print("login" + username.text + ":" + password.text)
}
background: Rectangle {
radius: 20
color: { // 动态颜色
if (submit.down)
return "#00b846"
if (submit.hovered)
return "#333333"
return "#57b846"
}
}
}
} // 中间矩形
} // 主体矩形
} // 窗口
自定义退出按钮
- 核心控件和窗口布局和登录事件处理
- 文本说明：登录系统
- 用户名：username
- 密码: password
- 登录按钮: submit
- 登录事件处理：onClicked
- 样式优化、背景渐变、图标自动替换
- 窗口背景渐变色
- 居中矩形设置
- 插入图片
- 输入框和字体颜色设置、提示文字设置
- 动态图标插入
- 按钮动态颜色设置
- 窗口拖动、去掉原有标题栏、做圆角窗口课拖动
Window {
width: 1280
height: 800
flags: Qt.FramelessWindowHint
color: "#00000000"
visible: true // 默认窗口不显示
title: "login"
id: root
property int dragX: 0
property int dragY: 0
property bool dragging: false
Rectangle {
width: parent.width
height: parent.height
anchors.centerIn: parent // 居中
gradient: Gradient{
GradientStop {
position: 0
color: "#4158d0"
}
GradientStop {
position: 1
color: "#c850c0"
}
orientation: Gradient.Horizontal
}
// 窗口拖动
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
}
}
}
Rectangle {
width: 800
height: 500
anchors.centerIn: parent
radius: 10
Image {
x: 57
y: 100
source: "./images/img-01.png"
}
Text {
x: 530
y: 130
width: 120
height: 30
font.pixelSize: 24
text: qsTr("Login")
color: "#FF0000"
}
TextField {
id: username
x: 440
y: 200
width: 300
height: 50
font.pixelSize: 20
placeholderText: qsTr("请输入用户名") // 提示词内容
placeholderTextColor: "#999999" // 提示词颜色
color: "#666666"
leftPadding: 60
background: Rectangle {
color: "#e6e6e6"
border.color: "#e6e6e6"
radius: 25
}
Image {
source: username.activeFocus?"images/u2.png":"images/u1.png"
width: 20
height: 20
x:30
y: 15
}
}
TextField {
id: password
x: username.x
y: username.y + username.height + 20
width: username.width
height: username.height
font.pixelSize: username.font.pixelSize
echoMode: TextInput.Password
color: "#666666"
leftPadding: 60
background: Rectangle {
color: "#e6e6e6"
border.color: "#e6e6e6"
radius: 25
}
Image { // 图片资源
source: password.activeFocus ? "images/p2.png" : "images/p1.png"
width: 20
height: 20
x: 30
y:15
// source: "file"
}
}
Button {
id: submit
x: username.x
y: password.y + password.height + 20
width: username.width
height: username.height
font.pixelSize: 25
onClicked: { // 处理事件
print("login" + username.text + ":" + password.text)
}
background: Rectangle {
radius: 20
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 {
id: closeWindow
text: qsTr("x")
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.color = "#1BFFFFFF"
}
onExited: parent.color = "#00000000"
onReleased: parent.color = "#1BFFFFFF"
onPressed: parent.color = "3BFFFFFF"
onClicked: {
root.close()
}
}
}
} // 主体矩形
} // 窗口
动画演示和图片旋转
- 核心控件和窗口布局和登录事件处理
- 文本说明：登录系统
- 用户名：username
- 密码: password
- 登录按钮: submit
- 登录事件处理：onClicked
- 样式优化、背景渐变、图标自动替换
- 窗口背景渐变色
- 居中矩形设置
- 插入图片
- 输入框和字体颜色设置、提示文字设置
- 动态图标插入
- 按钮动态颜色设置
- 窗口拖动、去掉原有标题栏、做圆角窗口课拖动
- 动画事件、控件动态出现、图片转动动画
Window {
width: 1280
height: 800
flags: Qt.FramelessWindowHint
color: "#00000000"
visible: true // 默认窗口不显示
title: "login"
id: root
property int dragX: 0
property int dragY: 0
property bool dragging: false
Rectangle {
width: parent.width
height: parent.height
anchors.centerIn: parent // 居中
gradient: Gradient{
GradientStop {
position: 0
color: "#4158d0"
}
GradientStop {
position: 1
color: "#c850c0"
}
orientation: Gradient.Horizontal
}
// 窗口拖动
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
}
}
}
Rectangle {
width: 800
height: 500
anchors.centerIn: parent
radius: 10
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: {
print("image clicked")
if (image.state == "rotated") {
image.state = ""
}
else {
image.state = "rotated"
}
}
}
}
Text {
x: 530
y: 130
width: 120
height: 30
font.pixelSize: 24
text: qsTr("Login")
color: "#FF0000"
}
TextField {
id: username
x: 440
y: 200
width: 300
height: 50
font.pixelSize: 20
placeholderText: qsTr("请输入用户名") // 提示词内容
placeholderTextColor: "#999999" // 提示词颜色
color: "#666666"
leftPadding: 60
background: Rectangle {
color: "#e6e6e6"
border.color: "#e6e6e6"
radius: 25
}
// 因为下面两个控件的位置随着username变化而变化，所以，username有动画他们两个也有动画
Image {
source: username.activeFocus?"images/u2.png":"images/u1.png"
width: 20
height: 20
x:30
y: 15
}
NumberAnimation on y {
from: username.y - 50
to: username.y
duration: 300
}
}
TextField {
id: password
x: username.x
y: username.y + username.height + 20
width: username.width
height: username.height
font.pixelSize: username.font.pixelSize
echoMode: TextInput.Password
color: "#666666"
leftPadding: 60
background: Rectangle {
color: "#e6e6e6"
border.color: "#e6e6e6"
radius: 25
}
Image { // 图片资源
source: password.activeFocus ? "images/p2.png" : "images/p1.png"
width: 20
height: 20
x: 30
y:15
// source: "file"
}
}
Button {
id: submit
x: username.x
y: password.y + password.height + 20
width: username.width
height: username.height
font.pixelSize: 25
onClicked: { // 处理事件
print("login" + username.text + ":" + password.text)
}
background: Rectangle {
radius: 20
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 {
id: closeWindow
text: qsTr("x")
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.color = "#1BFFFFFF"
}
onExited: parent.color = "#00000000"
onReleased: parent.color = "#1BFFFFFF"
onPressed: parent.color = "3BFFFFFF"
onClicked: {
root.close()
}
}
}
} // 主体矩形
} // 窗口
评论