QML-简单项目实战一

一、简介

使用QML创建一个简单的登录界面，代码内容来源于bilibili中的视频。

实现效果图如下：

二、实现步骤

1. 核心控件和布局管理和登录事件处理

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
/*1. 核心控件和布局管理和登录事件处理文本说明：登录系统用户名：username密码：password登录按钮：submit登录事件处理onClicked
*/
ApplicationWindow{ //窗口visible: truewidth: 1280height: 800title: qsTr("qml简单的登录界面")id:rootcolor: "lightblue"Rectangle{color: "red"width: parent.width/2height: parent.height/2anchors.centerIn: parentText { //文本说明：登录系统x: 530y:130width: 120height: 30font.pointSize: 24text: qsTr("登录系统") // 后续可以进行翻译}
//        用户名：usernameTextField{id:usernamex:440y:200width: 300height: 50font.pixelSize: 20}
//        密码：passwordTextField{id:passwordx:username.xy:username.y + username.height +10width: username.widthheight: username.heightfont.pixelSize: username.font.pixelSizeechoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文}
//        登录按钮：submitButton{id:submitx:password.xy:password.y +password.height + 10width: password.widthheight: password.heighttext: qsTr("登录")font.pixelSize: username.font.pixelSizeonClicked: {console.log("登录: "+username.text+":"+ password.text)print("登录: ",username.text,":",password.text)}}}}

2.样式优化、背景渐变、图标自动替换

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0  //渐变色需要导入的库
//import QtQuick.Controls.Material 2.12
//import QtQuick.Controls.Universal 2.12/*
1. 核心控件和布局管理和登录事件处理文本说明：登录系统用户名：username密码：password登录按钮：submit登录事件处理onClicked
2.样式优化、背景渐变、图标自动替换3.窗口拖动、去掉原有标题栏、做圆角窗口拖动
4.动画事件、控件动态出现、图片转动画*/
ApplicationWindow{ //窗口visible: truewidth: 1280height: 800title: qsTr("qml简单的登录界面")id:rootRectangle{color: "red"width: parent.widthheight: parent.heightanchors.centerIn: parentgradient:  Gradient{ //设置渐变色，渐变色优先级大于color颜色GradientStop{position: 0 ;color: "#4158d0" }GradientStop{position: 1 ;color: "#c850c0" }orientation: Gradient.Horizontal // 设置方向}//居中矩阵设置Rectangle{width: 800height: 500anchors.centerIn: parentradius:10 // 设置圆角//插入图片Image{x:57y:100
//                source: "./test.png"  // 必须要添加在资源文件中才能够加载,width,height 可以不设置采用图片的source: "file:///D://C++/C++.png"  //不在资源文件中要使用file:///  D:/可省去}Text { //文本说明：登录系统x: 530y:130width: 120height: 30font.pointSize: 24text: qsTr("登录系统") // 后续可以进行翻译color: "#333333"}//        用户名：usernameTextField{id:usernamex:440y:200width: 300height: 50font.pixelSize: 20placeholderText: "输入用户名"placeholderTextColor: "#999999"color: "#666666"leftPadding: 60background: Rectangle{color: "#e6e6e6"border.color: "#e6e6e6"radius: 25}//用户图标Image{width:20;height: 20x:30;y:15source:username.activeFocus ? "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-select.png": "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-unselect.png" //省略D:/ 路径可以用 \\ / //}}//        密码：passwordTextField{placeholderText: "输入密码"id:passwordx:username.xy:username.y + username.height +10width: username.widthheight: username.heightleftPadding: username.leftPaddingfont.pixelSize: username.font.pixelSizeechoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文
//                background: username.background //不能用这种方法，会把上面的背景换掉 因为对象只有一份 todobackground: Rectangle{color: username.background.color //颜色复用border.color: username.background.border.colorradius: 25}//密码图标Image{width:20;height: 20x:30;y:15source:password.activeFocus ? "file:///C++\\qml\\ttt\\pic\\wenben-select.png": "file:///C++\\qml\\ttt\\pic\\wenben-unselect.png" //省略D:/ 路径可以用 \\ / //}}//        登录按钮：submitButton{id:submitx:password.xy:password.y +password.height + 10width: password.widthheight: password.heighttext: qsTr("登录")palette.buttonText: "white"  //在本人电脑上测试，虽然qml会报错误：palette没有buttonText属性，但是可以运行font.pixelSize: username.font.pixelSizeonClicked: {
//                    submit.contentItem.color = "red" //这种方法可以改变按钮的颜色，但是在外面改变不了console.log("登录: "+username.text+":"+ password.text)print("登录: ",username.text,":",password.text)}background: Rectangle{radius:25color: {//可以判断状态来设置颜色if(submit.down)return "#00b846"else if(submit.hovered)return "#333333"elsereturn "#57b864"}}}} //中间矩形} //主体矩形} //窗口

3.窗口拖动、去掉原有标题栏、做圆角窗口拖动

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0  //渐变色需要导入的库
//import QtQuick.Controls.Material 2.12
//import QtQuick.Controls.Universal 2.12/*
1. 核心控件和布局管理和登录事件处理文本说明：登录系统用户名：username密码：password登录按钮：submit登录事件处理onClicked
2.样式优化、背景渐变、图标自动替换3.窗口拖动、去掉原有标题栏、做圆角窗口拖动
4.动画事件、控件动态出现、图片转动画*/
ApplicationWindow{ //窗口visible: truewidth: 1280height: 800title: qsTr("qml简单的登录界面")id:rootcolor: "#00000000" //因为边框圆角的问题,可以设置下透明flags: Qt.Window | Qt.FramelessWindowHint //属性，标题栏隐藏 无框窗口提示,必须要前面的,不然系统桌面菜单栏,看不到软件property int dragx: 0 //属性命令要小写字母开头property int dragy: 0property bool isDrag: falseRectangle{radius: 10 //设置主窗口圆角width: parent.widthheight: parent.heightanchors.centerIn: parentgradient:  Gradient{ //设置渐变色，渐变色优先级大于color颜色GradientStop{position: 0 ;color: "#4158d0" }GradientStop{position: 1 ;color: "#c850c0" }orientation: Gradient.Horizontal // 设置方向}//窗口拖动MouseArea{width: parent.widthheight: 100onPressed:{ //鼠标按下root.dragx = mouseX; root.dragy = mouseY;root.isDrag = true}onReleased: root.isDrag = false; //鼠标释放onPositionChanged:{  //位置改变时候if(root.isDrag){
//                    console.log("mouseX = ",mouseX)
//                    console.log("mouseY = ",mouseY)root.x += mouseX - root.dragx //拖动的位置 = 鼠标移动后位置-鼠标按下的位置root.y += mouseY - root.dragy}}}//居中矩阵设置Rectangle{width: 800height: 500anchors.centerIn: parentradius:10 // 设置圆角//插入图片Image{x:57y:100
//                source: "./test.png"  // 必须要添加在资源文件中才能够加载,width,height 可以不设置采用图片的source: "file:///D://C++/C++.png"  //不在资源文件中要使用file:///  D:/可省去}Text { //文本说明：登录系统x: 530y:130width: 120height: 30font.pointSize: 24text: qsTr("登录系统") // 后续可以进行翻译color: "#333333"}//        用户名：usernameTextField{id:usernamex:440y:200width: 300height: 50font.pixelSize: 20placeholderText: "输入用户名"placeholderTextColor: "#999999"color: "#666666"leftPadding: 60background: Rectangle{color: "#e6e6e6"border.color: "#e6e6e6"radius: 25}//用户图标Image{width:20;height: 20x:30;y:15source:username.activeFocus ? "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-select.png": "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-unselect.png" //省略D:/ 路径可以用 \\ / //}}//        密码：passwordTextField{placeholderText: "输入密码"id:passwordx:username.xy:username.y + username.height +10width: username.widthheight: username.heightleftPadding: username.leftPaddingfont.pixelSize: username.font.pixelSizeechoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文
//                background: username.background //不能用这种方法，会把上面的背景换掉 因为对象只有一份 todobackground: Rectangle{color: username.background.color //颜色复用border.color: username.background.border.colorradius: 25}//密码图标Image{width:20;height: 20x:30;y:15source:password.activeFocus ? "file:///C++\\qml\\ttt\\pic\\wenben-select.png": "file:///C++\\qml\\ttt\\pic\\wenben-unselect.png" //省略D:/ 路径可以用 \\ / //}}//        登录按钮：submitButton{id:submitx:password.xy:password.y +password.height + 10width: password.widthheight: password.heighttext: qsTr("登录")palette.buttonText: "white"  //在本人电脑上测试，虽然qml会报错误：palette没有buttonText属性，但是可以运行font.pixelSize: username.font.pixelSizeonClicked: {
//                    submit.contentItem.color = "red" //这种方法可以改变按钮的颜色，但是在外面改变不了console.log("登录: "+username.text+":"+ password.text)print("登录: ",username.text,":",password.text)}background: Rectangle{radius:25color: {//可以判断状态来设置颜色if(submit.down)return "#00b846"else if(submit.hovered)return "#333333"elsereturn "#57b864"}}}} //中间矩形Rectangle{x:root.width - 35y:5width: 30;height: 30color: "#00000000" //rgba 最后表示透明度Text {id: closetext: qsTr("×")color: "black"font.pixelSize: 28anchors.centerIn: parent}MouseArea{//鼠标区域事件anchors.fill: parenthoverEnabled: true //设置监听鼠标移入事件，默认不开启onEntered: { // 鼠标进入时，parent.color = "#1BFFFFFF"}onExited: parent.color = "#00000000" // 鼠标退出时onPressed: parent.color = "#FF0000"; //鼠标按下时onClicked: root.close() //调用主窗口函数，关闭界面。}}} //主体矩形} //窗口

4.动画事件、控件动态出现、图片转动画

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0  //渐变色需要导入的库
//import QtQuick.Controls.Material 2.12
//import QtQuick.Controls.Universal 2.12/*
1. 核心控件和布局管理和登录事件处理文本说明：登录系统用户名：username密码：password登录按钮：submit登录事件处理onClicked
2.样式优化、背景渐变、图标自动替换3.窗口拖动、去掉原有标题栏、做圆角窗口拖动
4.动画事件、控件动态出现、图片转动画*/
ApplicationWindow{ //窗口visible: truewidth: 1280height: 800title: qsTr("qml简单的登录界面")id:rootcolor: "#00000000" //因为边框圆角的问题,可以设置下透明flags: Qt.Window | Qt.FramelessWindowHint //属性，标题栏隐藏 无框窗口提示,必须要前面的,不然系统桌面菜单栏,看不到软件property int dragx: 0 //属性命令要小写字母开头property int dragy: 0property bool isDrag: falseRectangle{radius: 10 //设置主窗口圆角width: parent.widthheight: parent.heightanchors.centerIn: parentgradient:  Gradient{ //设置渐变色，渐变色优先级大于color颜色GradientStop{position: 0 ;color: "#4158d0" }GradientStop{position: 1 ;color: "#c850c0" }orientation: Gradient.Horizontal // 设置方向}//窗口拖动MouseArea{width: parent.widthheight: 100onPressed:{ //鼠标按下root.dragx = mouseX; root.dragy = mouseY;root.isDrag = true}onReleased: root.isDrag = false; //鼠标释放onPositionChanged:{  //位置改变时候if(root.isDrag){root.x += mouseX - root.dragx //拖动的位置 = 鼠标移动后位置-鼠标按下的位置root.y += mouseY - root.dragy}}}//居中矩阵设置Rectangle{width: 800height: 500anchors.centerIn: parentradius:10 // 设置圆角//插入图片Image{id:imagex:57y:100source: "file:///D://C++/C++.png"  //不在资源文件中要使用file:///  D:/可省去states: [State{name:"rotated"PropertyChanges {target:  imagerotation:180}} ]transitions: Transition {RotationAnimation{duration: 1000direction: RotationAnimation.Counterclockwise}}MouseArea{anchors.fill: parentonClicked: {if(image.state === "rotated"){image.state =""}else{image.state = "rotated"}}}}Text { //文本说明：登录系统x: 530y:130width: 120height: 30font.pointSize: 24text: qsTr("登录系统") // 后续可以进行翻译color: "#333333"}//        用户名：usernameTextField{id:usernamex:440y:200width: 300height: 50font.pixelSize: 20placeholderText: "输入用户名"placeholderTextColor: "#999999"color: "#666666"leftPadding: 60background: Rectangle{color: "#e6e6e6"border.color: "#e6e6e6"radius: 25}//用户图标Image{width:20;height: 20x:30;y:15source:username.activeFocus ? "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-select.png": "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-unselect.png" //省略D:/ 路径可以用 \\ / //}//动画效果,在用户名设置,因为QML的属性绑定,密码,登录都会移动.NumberAnimation on y{from: username.y -50to: username.yduration: 300 //500毫秒}}//        密码：passwordTextField{placeholderText: "输入密码"id:passwordx:username.xy:username.y + username.height +10width: username.widthheight: username.heightleftPadding: username.leftPaddingfont.pixelSize: username.font.pixelSizeechoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文
//                background: username.background //不能用这种方法，会把上面的背景换掉 因为对象只有一份 todobackground: Rectangle{color: username.background.color //颜色复用border.color: username.background.border.colorradius: 25}//密码图标Image{width:20;height: 20x:30;y:15source:password.activeFocus ? "file:///C++\\qml\\ttt\\pic\\wenben-select.png": "file:///C++\\qml\\ttt\\pic\\wenben-unselect.png" //省略D:/ 路径可以用 \\ / //}}//        登录按钮：submitButton{id:submitx:password.xy:password.y +password.height + 10width: password.widthheight: password.heighttext: qsTr("登录")palette.buttonText: "white"  //在本人电脑上测试，虽然qml会报错误：palette没有buttonText属性，但是可以运行font.pixelSize: username.font.pixelSizeonClicked: {
//                    submit.contentItem.color = "red" //这种方法可以改变按钮的颜色，但是在外面改变不了console.log("登录: "+username.text+":"+ password.text)print("登录: ",username.text,":",password.text)}background: Rectangle{radius:25color: {//可以判断状态来设置颜色if(submit.down)return "#00b846"else if(submit.hovered)return "#333333"elsereturn "#57b864"}}}} //中间矩形Rectangle{x:root.width - 35y:5width: 30;height: 30color: "#00000000" //rgba 最后表示透明度Text {id: closetext: qsTr("×")color: "black"font.pixelSize: 28anchors.centerIn: parent}MouseArea{//鼠标区域事件anchors.fill: parenthoverEnabled: true //设置监听鼠标移入事件，默认不开启onEntered: { // 鼠标进入时，parent.color = "#1BFFFFFF"}onExited: parent.color = "#00000000" // 鼠标退出时onPressed: parent.color = "#FF0000"; //鼠标按下时onClicked: root.close() //调用主窗口函数，关闭界面。}}} //主体矩形} //窗口

在QML中，还可以使用设计工具（Qt Design Studio）去设计窗口（初次接触，有点看不懂），位置在：D:\C++\Qt5.15.2\Tools\QtDesignStudio\bin 。根据自己电脑上的QT版本去看。