当前位置： 首页 > article >正文

QML-简单项目实战一

article 2024/11/14 16:39:05

一、简介

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

实现效果图如下：

二、实现步骤

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

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
/*
  1. 核心控件和布局管理和登录事件处理
  文本说明：登录系统
  用户名：username
  密码：password
  登录按钮：submit
  登录事件处理
  onClicked
*/
ApplicationWindow{ //窗口
    visible: true
    width: 1280
    height: 800
    title: qsTr("qml简单的登录界面")
    id:root
    color: "lightblue"
    Rectangle{
        color: "red"
        width: parent.width/2
        height: parent.height/2
        anchors.centerIn: parent

        Text { //文本说明：登录系统
            x: 530
            y:130
            width: 120
            height: 30
            font.pointSize: 24
            text: qsTr("登录系统") // 后续可以进行翻译
        }
//        用户名：username
        TextField{
            id:username
            x:440
            y:200
            width: 300
            height: 50
            font.pixelSize: 20
        }
//        密码：password
        TextField{
            id:password
            x:username.x
            y:username.y + username.height +10
            width: username.width
            height: username.height
            font.pixelSize: username.font.pixelSize
            echoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文
        }
//        登录按钮：submit
        Button{
            id:submit
            x:password.x
            y:password.y +password.height + 10
            width: password.width
            height: password.height
            text: qsTr("登录")
            font.pixelSize: username.font.pixelSize
            onClicked: {
                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: true
    width: 1280
    height: 800
    title: qsTr("qml简单的登录界面")
    id:root

    Rectangle{
        color: "red"
        width: parent.width
        height: parent.height
        anchors.centerIn: parent
        gradient:  Gradient{ //设置渐变色，渐变色优先级大于color颜色
            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: "./test.png"  // 必须要添加在资源文件中才能够加载,width,height 可以不设置采用图片的
                source: "file:///D://C++/C++.png"  //不在资源文件中要使用file:///  D:/可省去

            }

            Text { //文本说明：登录系统
                x: 530
                y:130
                width: 120
                height: 30
                font.pointSize: 24
                text: qsTr("登录系统") // 后续可以进行翻译
                color: "#333333"

            }
    //        用户名：username
            TextField{
                id:username
                x:440
                y:200
                width: 300
                height: 50
                font.pixelSize: 20
                placeholderText: "输入用户名"
                placeholderTextColor: "#999999"
                color: "#666666"
                leftPadding: 60
                background: Rectangle{
                    color: "#e6e6e6"
                    border.color: "#e6e6e6"
                    radius: 25
                }
                //用户图标
                Image{
                    width:20;height: 20
                    x:30;y:15
                    source:username.activeFocus ? "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-select.png": "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-unselect.png" //省略D:/ 路径可以用 \\ / //
                }
            }
    //        密码：password
            TextField{
                placeholderText: "输入密码"
                id:password
                x:username.x
                y:username.y + username.height +10
                width: username.width
                height: username.height
                leftPadding: username.leftPadding
                font.pixelSize: username.font.pixelSize
                echoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文
//                background: username.background //不能用这种方法，会把上面的背景换掉 因为对象只有一份 todo

                background: Rectangle{
                    color: username.background.color //颜色复用
                    border.color: username.background.border.color
                    radius: 25
                }
                //密码图标
                Image{
                    width:20;height: 20
                    x:30;y:15
                    source:password.activeFocus ? "file:///C++\\qml\\ttt\\pic\\wenben-select.png": "file:///C++\\qml\\ttt\\pic\\wenben-unselect.png" //省略D:/ 路径可以用 \\ / //
                }

            }
    //        登录按钮：submit
            Button{
                id:submit
                x:password.x
                y:password.y +password.height + 10
                width: password.width
                height: password.height

                text: qsTr("登录")
                palette.buttonText: "white"  //在本人电脑上测试，虽然qml会报错误：palette没有buttonText属性，但是可以运行
                font.pixelSize: username.font.pixelSize
                onClicked: {
//                    submit.contentItem.color = "red" //这种方法可以改变按钮的颜色，但是在外面改变不了
                    console.log("登录: "+username.text+":"+ password.text)
                    print("登录: ",username.text,":",password.text)
                }

                background: Rectangle{
                    radius:25
                    color: {
                        //可以判断状态来设置颜色

                        if(submit.down)
                            return "#00b846"
                        else if(submit.hovered)
                            return "#333333"
                        else
                            return "#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: true
    width: 1280
    height: 800
    title: qsTr("qml简单的登录界面")
    id:root
    color: "#00000000" //因为边框圆角的问题,可以设置下透明

    flags: Qt.Window | Qt.FramelessWindowHint //属性，标题栏隐藏 无框窗口提示,必须要前面的,不然系统桌面菜单栏,看不到软件
    property int dragx: 0 //属性命令要小写字母开头
    property int dragy: 0
    property bool isDrag: false

    Rectangle{
        radius: 10 //设置主窗口圆角
        width: parent.width
        height: parent.height
        anchors.centerIn: parent
        gradient:  Gradient{ //设置渐变色，渐变色优先级大于color颜色
            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.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: 800
            height: 500
            anchors.centerIn: parent
            radius:10 // 设置圆角
            //插入图片
            Image{
                x:57
                y:100
//                source: "./test.png"  // 必须要添加在资源文件中才能够加载,width,height 可以不设置采用图片的
                source: "file:///D://C++/C++.png"  //不在资源文件中要使用file:///  D:/可省去

            }

            Text { //文本说明：登录系统
                x: 530
                y:130
                width: 120
                height: 30
                font.pointSize: 24
                text: qsTr("登录系统") // 后续可以进行翻译
                color: "#333333"

            }
    //        用户名：username
            TextField{
                id:username
                x:440
                y:200
                width: 300
                height: 50
                font.pixelSize: 20
                placeholderText: "输入用户名"
                placeholderTextColor: "#999999"
                color: "#666666"
                leftPadding: 60
                background: Rectangle{
                    color: "#e6e6e6"
                    border.color: "#e6e6e6"
                    radius: 25
                }
                //用户图标
                Image{
                    width:20;height: 20
                    x:30;y:15
                    source:username.activeFocus ? "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-select.png": "file:///C++\\qml\\ttt\\pic\\tongdaoxinxi-unselect.png" //省略D:/ 路径可以用 \\ / //
                }
            }
    //        密码：password
            TextField{
                placeholderText: "输入密码"
                id:password
                x:username.x
                y:username.y + username.height +10
                width: username.width
                height: username.height
                leftPadding: username.leftPadding
                font.pixelSize: username.font.pixelSize
                echoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文
//                background: username.background //不能用这种方法，会把上面的背景换掉 因为对象只有一份 todo

                background: Rectangle{
                    color: username.background.color //颜色复用
                    border.color: username.background.border.color
                    radius: 25
                }
                //密码图标
                Image{
                    width:20;height: 20
                    x:30;y:15
                    source:password.activeFocus ? "file:///C++\\qml\\ttt\\pic\\wenben-select.png": "file:///C++\\qml\\ttt\\pic\\wenben-unselect.png" //省略D:/ 路径可以用 \\ / //
                }

            }
    //        登录按钮：submit
            Button{
                id:submit
                x:password.x
                y:password.y +password.height + 10
                width: password.width
                height: password.height

                text: qsTr("登录")
                palette.buttonText: "white"  //在本人电脑上测试，虽然qml会报错误：palette没有buttonText属性，但是可以运行
                font.pixelSize: username.font.pixelSize
                onClicked: {
//                    submit.contentItem.color = "red" //这种方法可以改变按钮的颜色，但是在外面改变不了
                    console.log("登录: "+username.text+":"+ password.text)
                    print("登录: ",username.text,":",password.text)
                }

                background: Rectangle{
                    radius:25
                    color: {
                        //可以判断状态来设置颜色

                        if(submit.down)
                            return "#00b846"
                        else if(submit.hovered)
                            return "#333333"
                        else
                            return "#57b864"
                    }

                }
            }


        } //中间矩形

        Rectangle{
            x:root.width - 35
            y:5
            width: 30;height: 30
            color: "#00000000" //rgba 最后表示透明度
            Text {
                id: close
                text: qsTr("×")
                color: "black"
                font.pixelSize: 28
                anchors.centerIn: parent
            }
            MouseArea{//鼠标区域事件
                anchors.fill: parent
                hoverEnabled: 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: true
    width: 1280
    height: 800
    title: qsTr("qml简单的登录界面")
    id:root
    color: "#00000000" //因为边框圆角的问题,可以设置下透明

    flags: Qt.Window | Qt.FramelessWindowHint //属性，标题栏隐藏 无框窗口提示,必须要前面的,不然系统桌面菜单栏,看不到软件
    property int dragx: 0 //属性命令要小写字母开头
    property int dragy: 0
    property bool isDrag: false

    Rectangle{
        radius: 10 //设置主窗口圆角
        width: parent.width
        height: parent.height
        anchors.centerIn: parent
        gradient:  Gradient{ //设置渐变色，渐变色优先级大于color颜色
            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.isDrag = true
            }
            onReleased: root.isDrag = false; //鼠标释放
            onPositionChanged:{  //位置改变时候
                if(root.isDrag)
                {
                    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: "file:///D://C++/C++.png"  //不在资源文件中要使用file:///  D:/可省去
                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.pointSize: 24
                text: qsTr("登录系统") // 后续可以进行翻译
                color: "#333333"

            }
    //        用户名：username
            TextField{
                id:username
                x:440
                y:200
                width: 300
                height: 50
                font.pixelSize: 20
                placeholderText: "输入用户名"
                placeholderTextColor: "#999999"
                color: "#666666"
                leftPadding: 60
                background: Rectangle{
                    color: "#e6e6e6"
                    border.color: "#e6e6e6"
                    radius: 25
                }
                //用户图标
                Image{
                    width:20;height: 20
                    x:30;y:15
                    source: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 -50
                    to: username.y
                    duration: 300 //500毫秒
                }

            }
    //        密码：password
            TextField{
                placeholderText: "输入密码"
                id:password
                x:username.x
                y:username.y + username.height +10
                width: username.width
                height: username.height
                leftPadding: username.leftPadding
                font.pixelSize: username.font.pixelSize
                echoMode: TextInput.Password  //设置输入模式为密码，设置后不能输入中文
//                background: username.background //不能用这种方法，会把上面的背景换掉 因为对象只有一份 todo

                background: Rectangle{
                    color: username.background.color //颜色复用
                    border.color: username.background.border.color
                    radius: 25
                }
                //密码图标
                Image{
                    width:20;height: 20
                    x:30;y:15
                    source:password.activeFocus ? "file:///C++\\qml\\ttt\\pic\\wenben-select.png": "file:///C++\\qml\\ttt\\pic\\wenben-unselect.png" //省略D:/ 路径可以用 \\ / //
                }

            }
    //        登录按钮：submit
            Button{
                id:submit
                x:password.x
                y:password.y +password.height + 10
                width: password.width
                height: password.height

                text: qsTr("登录")
                palette.buttonText: "white"  //在本人电脑上测试，虽然qml会报错误：palette没有buttonText属性，但是可以运行
                font.pixelSize: username.font.pixelSize
                onClicked: {
//                    submit.contentItem.color = "red" //这种方法可以改变按钮的颜色，但是在外面改变不了
                    console.log("登录: "+username.text+":"+ password.text)
                    print("登录: ",username.text,":",password.text)
                }

                background: Rectangle{
                    radius:25
                    color: {
                        //可以判断状态来设置颜色

                        if(submit.down)
                            return "#00b846"
                        else if(submit.hovered)
                            return "#333333"
                        else
                            return "#57b864"
                    }

                }
            }


        } //中间矩形

        Rectangle{
            x:root.width - 35
            y:5
            width: 30;height: 30
            color: "#00000000" //rgba 最后表示透明度
            Text {
                id: close
                text: qsTr("×")
                color: "black"
                font.pixelSize: 28
                anchors.centerIn: parent
            }
            MouseArea{//鼠标区域事件
                anchors.fill: parent
                hoverEnabled: 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版本去看。


http://www.kler.cn/a/388675.html

相关文章：

  • 丹摩征文活动｜丹摩智算平台使用指南
  • 在linux中使用nload实时查看网卡流量
  • ubuntu20.04安装FLIR灰点相机BFS-PGE-16S2C-CS的ROS驱动
  • POI实现根据PPTX模板渲染PPT
  • libcurl.net入门使用
  • 鸿蒙next版开发：相机开发-元数据(ArkTS)
  • 【系统架构设计师（第2版）】五、软件工程基础知识
  • Chromium127编译指南 Mac篇（五）- 编译Chromium
  • SpringBoot连接多个redis
  • 基于SpringBoot和Vue的公司文档管理系统设计与开发(源码+定制+开发）
  • 如何使用Spring Cloud Gateway实现一个最简单的API网关示例
  • Docker入门系列——DockerFile的使用
  • 游戏引擎学习第四天
  • 杂七杂八之Swagger环境搭建（Java版本）
  • Spring Boot实现文件上传与OSS集成：从基础到应用
  • Go 使用 Redis 实现分布式锁
  • OpenAI CEO阿尔特曼预测AGI可能在五年内出现 对社会的影响远小于预期
  • ECharts 实现大屏地图功能
  • Kafka java 配置
  • Transformer-GRU、Transformer、CNN-GRU、GRU、CNN五模型多变量回归预测
  • Python的函数（补充浅拷贝和深拷贝）
  • 测试开发面试题记录
  • 拿下阿里云之后如何在本地运行镜像进行分析
  • 二维前缀和 子矩阵的和
  • 「iOS」——知乎日报第三周总结
  • 云财务SaaS财务软件源码