QML无边框窗口(可拖动)

一、实现原理

        在 QML 中实现无边框且可以拖动的窗口,要比 Qt PyQt 简单的多。只要隐藏掉窗体、去掉标题栏,然后用一个和原窗体相同大小的 Rectangle 作为新窗体。

        最后在新窗体上再加一个小一些的 Rectangle 作为标题栏,在标题栏中放一个 MouseArea 来监测鼠标位置,同时更新窗体的位置,即 x值即可。

二、具体步骤步骤

1. 去掉标题栏、隐藏窗体

        color 属性设置为透明即可,防止后面覆盖上来的 Rectangle 有黑边。

flags: Qt.FramelessWindowHint
color: "#00000000"
2. 用Rectangle替代原窗体

        要使 Rectangle 能覆盖原窗口,只要把它的宽高设置成和原窗体的宽高一致即可。然后我给它又加了圆角和渐变。如果你不需要圆角,那上面步骤中的 color 属性可以不用设置。

    Rectangle
    {
        width: parent.width
        height: parent.height

        gradient: Gradient
        {
            GradientStop{ position: 0.0; color:"#1f005c"}
            GradientStop{ position: 1.0; color:"#ffb56b"}
        }

        radius: 15

        ...
}
3. 新的标题栏,实现拖动

        做到第二步,窗体还不能拖动,是一块固定区域。一般软件的窗体都是通过鼠标按住标题栏,然后移动鼠标,从而窗体跟随鼠标移动,松开鼠标时则窗体停留在此处。

        标题栏实现很简单,就是再用一个 Rectangle 来替代就行,这个 Rectangle 和窗体的 Rectangle 是等宽不等高的,高度需要多少,你可以自己设置。

        因为标题栏一般都在窗体的顶部,所以我们将这2个 Rectangle 的顶部锚定在一起。

        在标题栏中,我们填充一个 MouseArea,在这个 MouseArea 中我们要监测鼠标的3种状态,分别是:按下、松开、位置移动。

        在按下状态时,我们获取鼠标的位置。在松开的时候判断鼠标是否移动,在鼠标移动时,我们将鼠标当前位置减去原窗体位置并赋值给窗体的 xy,即实现了鼠标拖动窗体的功能。

        这一步的代码比较长,小伙伴们可以对照下面的完整代码来理解,我就不一一拆开说明了。

三、完整代码

import QtQuick
import QtQuick.Controls

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    color: "#00000000"
    flags: Qt.FramelessWindowHint

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

    Rectangle
    {
        width: parent.width
        height: parent.height

        gradient: Gradient
        {
            GradientStop{ position: 0.0; color:"#1f005c"}
            GradientStop{ position: 1.0; color:"#ffb56b"}
        }

        radius: 15

        Rectangle
        {
            width: parent.width
            height: 50
            color: "grey"
            anchors.top: parent.top

            MouseArea
            {
                anchors.fill: parent
                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
                    }
                }
            }
        }
    }
}

四、结语

        码字不易,如果对你有所帮助,请随手点个赞吧!我还会继续更新有关 QML 的更多知识与技巧,如果你也有兴趣,可以再关注我一下,感谢!

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/478966.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Modbus串口通信

Modbus ASCII与RTU? 发送报文的方式不一样 ASCII:将数据转换成1 6进制ASCII码再发送 RTU:直接发送原始报文当然也是进制 Modbus-与RS485有何区别? Modbus是通信协议 RS485电气接口规范 Modbus软件 RS485硬件 比如高速公路与汽车的关系,TCP/IP与网线…

FreeCad-0.19源码For Windows编译分享

前言 最近花了不少时间来研究这个FreeCad开源代码的编译,一是查看GitHub上的安装介绍,二是查看各位道友们踩坑安装的心路历程,由于比较信息零碎,也是跟着踩了不少的坑。。。为了帮助后人快速编译通过,节省时间决定先梳…

发展的挺快的Rust

C 可能在将来会逐步的退出历史舞台 Rust 在linux 上出现的频次越来越多了 新的语言和重构带来了更方便快捷的体验 好玩的命令集合 https://github.com/ibraheemdev/modern-unix.git 这速度,这花活儿

每个云渲染平台都说自己24小时客服,真的是这样吗?

我们平时经常看到很多云渲染平台说自己是7x24小时客服,随时找客服都能找到,真的是这样吗?其实不是的,很多云渲染平台根本没有24小时人工客服,哪他们的人工客服什么时候有呢?我们一起来看看。 1、 炫云 炫云…

分享购:社交电商新模式,购物省钱又赚钱的创新之道

分享购模式如今在网络世界中引起了广泛的讨论和关注,其独特的盈利方式更是吸引了大批用户的目光。那么,分享购究竟是什么呢? 分享购的核心亮点在于它巧妙地融合了各大主流电商平台,如淘宝、京东、拼多多等。用户在购物时无需改变原…

AcWing 3224. 画图 (BFS,Flood Fill,坐标变换)

用 ASCII 字符来画图是一件有趣的事情,并形成了一门被称为 ASCII Art 的艺术。 例如,下图是用 ASCII 字符画出来的 CSPRO 字样。 ..____.____..____..____...___.../.___/.___||.._.\|.._.\./._.\.|.|...\___.\|.|_).|.|_).|.|.|.||.|___.___).|..__/|.…

Spring之@Qualifier注解

场景重现 当我们注入的依赖存在多个候选者,我们得使用一些方法来筛选出唯一候选者,否则就会抛出异常 demo演示 创建接口Car,以及两个实现其接口的bean public interface Car { }Component public class RedCar implements Car { }Component public class WhiteCar implemen…

【python】python葡萄酒数据集—分类建模与分析(源码+数据集)【独一无二】

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

Git原理及使用

1、Git初识 Git是一种版本控制器: 对于同一份文件,做多次改动,Git会记录每一次改动前后的文件。 通俗的讲就是⼀个可以记录⼯程的每⼀次改动和版本迭代的⼀个管理系统,同时也⽅便多⼈协同作业。 注意: Git其实只能跟踪⽂本⽂件的改动,⽐如TXT⽂件,⽹⻚,所有的程序代码…

matlab实现机器学习svm

一、目的和要求 1.编程实现SVM训练函数和预测函数; 2.绘制线性和非线性边界; 3.编写线性核函数 二、算法 1.线性svm: 分离超平面:wxb0,对于线性可分的数据集来说,这样的超平面有无穷多个(…

汽车ECU的虚拟化技术(五) -- 对MCU虚拟化实现难点的思考

目录 1.概述 2.虚拟化软件的难点 2.1 虚拟化中的中断处理 2.2 虚拟ECU的通信 3.小结 1.概述 在上面文章里汽车ECU的虚拟化技术(四) -- 对MCU虚拟化实现难点的思考-CSDN博客,解了OEM面临新的电子电气架构下的集成难点,引入了hypervisor以及VM调度机制…

VMD + CEEMDAN 二次分解,CNN-Transformer预测模型

往期精彩内容: 时序预测:LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 风速预测(一)数据集介绍和预处理-CSDN博客 风速预测(二)基于Pytorch的EMD-LSTM模型-CSDN博客 风速预测&#xff…

研华工控机610L学习笔记1:基本了解与认识

今日开始学习一些工控机的基本知识: 目录 目录 1、工控机介绍: 2、研华610L说明书参数了解: 3、基本结构了解: 前面板: 后窗: 4.RS232串口: ​编辑 5、工控机分类: 6、工控上…

深度学习pytorch——激活函数损失函数(持续更新)

论生物神经元与神经网络中的神经元联系——为什么使用激活函数? 我们将生物体中的神经元与神经网络中的神经元共同分析。从下图可以看出神经网络中的神经元与生物体中的神经元有很多相似之处,由于只有刺激达到一定的程度人体才可以感受到刺激&#xff0c…

一、SpringBoot基础搭建

本教程主要给初学SpringBoot的开发者,通过idea搭建单体服务提供手把手教学例程,主要目的在于理解环境的搭建,以及maven模块之间的整合与调用 源码:jun/learn-springboot 以商城项目为搭建例子,首先计划建1个父模块&…

微服务高级篇(三):分布式缓存+Redis集群

文章目录 一、单点Redis的问题及解决方案二、Redis持久化2.1 单机安装Redis2.2 RDB持久化2.3 AOF持久化2.4 RDB和AOF对比 三、Redis主从3.1 搭建Redis主从架构3.1.1 集群结构3.1.2 准备实例和配置3.1.3 启动3.1.4 开启主从关系3.1.5 测试 3.2 数据同步3.2.1 全量同步【建立连接…

【嵌入式——QT】QWT应用

【嵌入式——QT】QWT应用 概述步骤一步骤二步骤三代码声明代码实现图示 概述 QWT,全称Qt Widgets for Technical Applications,是一个基于Qt开发的第三方库。它主要为具有技术背景的程序提供GUI组件和一组实用类,用于生成各种统计图。QWT的主…

【JDBC编程】Java连接MySQL的五个步骤

目录 JDBC编程 1.JDBC的使用 2.数据库连接Connection 3.Statement对象 4.ResultSet对象 JDBC编程 JDBC编程运用了MySQL提供的 Java 的驱动包 mysql-connector-java ,需要基于 Java 操作 MySQL 即需要该驱动包。同样的, 要基于 Java 操作 Oracle 数据库…

【文本输入框】显示输入文本的字数,并且限制输入字数不能超过***个字符

需求 实现一个输入框显示文本的字数&#xff0c;并且设置字数限制&#xff0c;当文本中没有内容或字符串长度超出限制&#xff0c;则不能点击确定按钮。 <div class"input-content"><div class"pt-2 rounded-tl-xl rounded-tr-xl bg-blue-100"&…

vue3+threejs新手从零开发卡牌游戏(十):创建己方战域

首先在game目录下创建site文件夹&#xff0c;用来存放战域相关代码&#xff1a; 这里思考下如何创建战域&#xff0c;我的想法是添加一个平面&#xff0c;将己方战域和对方战域都添加进这个平面中&#xff0c;所以首先我们先添加一个战域plane&#xff0c;site/index.vue代码如…