QML 可拖拽边框和顶点调整大小组件（新增对主窗口支持）

2023-05-16

QML项目开发过程中，有时候需要对控件大小和位置‘进行人为调整，因此设计该组件。该组件鼠标置于边框和顶点位置时鼠标样式对应改变，拖动边框可修改该方向组件大小，拖动顶点可修改组件处横纵向组件大小。对控件拖拽效果如图：

新增了对拖拽对象为主窗口的支持，效果图：

属性：

property var resizeTarget: 需要控制调整的目标组件(传入对象ID)

property int minimumWidth: 组件可调整到的最小宽度

property int minimumHeight: 组件可调整到的最小高度

property int mouseRegion: 接收鼠标调整区域范围

使用时，将该组件文件ResizableRectangle.qml引入项目中，设置resizeTarget为需要控制的组件即可，如：

import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 2.1

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Resizable Widget")

    Rectangle {
        id: rectangle
        x: 10
        y: 10
        width: 100
        height: 100
        color: "yellow"

        Button {
            text: qsTr("Button")
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: {
                text = "Yellow Clicked!"
            }
        }

        ResizableRectangle{
            resizeTarget: rectangle//设置调整目标ID
        }
    }
}

当拖拽对象为系统主窗体时：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    id:appWindow
    width: 640
    height: 480
    visible: true
    title: qsTr("GIS")
    visibility:"Maximized"
    flags:Qt.FramelessWindowHint

    ResizableRectangle{
        anchors.fill: parent
        resizeTarget: appWindow
    }
}

Demo示例Github:

https://github.com/zjgo007/QmlDemo/tree/master/ResizableRectanglehttps://github.com/zjgo007/QmlDemo/tree/master/ResizableRectangleDemo示例CSDN:

https://download.csdn.net/download/zjgo007/84806016https://download.csdn.net/download/zjgo007/84806016

ResizableRectangle.qml完整代码：

import QtQuick 2.0
import QtQuick.Window 2.15

Item {
    id:rect
    property int minimumWidth: 50
    property int minimumHeight: 50
    property int mouseRegion: 5
    property var resizeTarget: rect
    anchors.fill: resizeTarget

    MouseArea {
        id:leftX
        width: mouseRegion
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.leftMargin: 0
        anchors.bottomMargin: 0
        anchors.topMargin: 0
        cursorShape: Qt.SizeHorCursor
        property int xPosition: 0
        onPressed: {
            xPosition = mouse.x
        }

        onPositionChanged: {
            var xOffset = mouse.x-xPosition
            if(rect.resizeTarget.x+xOffset>0 && rect.resizeTarget.width-xOffset>minimumWidth){
                rect.resizeTarget.x = rect.resizeTarget.x+xOffset
                rect.resizeTarget.width = rect.resizeTarget.width-xOffset
            }
        }
    }

    MouseArea{
        id:rightX
        width: mouseRegion
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.topMargin: 0
        anchors.rightMargin: 0
        cursorShape: Qt.SizeHorCursor
        property int xPosition: 0
        onPressed: {
            xPosition = mouse.x
        }

        onPositionChanged: {
            var xOffset = mouse.x-xPosition
            var xWidth = rect.resizeTarget.width+xOffset
            var availableWidth = rect.resizeTarget.parent ? rect.resizeTarget.parent.width:Screen.desktopAvailableWidth
            if(xWidth+rect.resizeTarget.x<availableWidth && xWidth>minimumWidth){
                rect.resizeTarget.width = xWidth
            }
        }
    }

    MouseArea{
        id:topY
        height: mouseRegion
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0
        cursorShape: Qt.SizeVerCursor
        property int yPosition: 0
        onPressed: {
            yPosition = mouse.y
        }

        onPositionChanged: {
            var yOffset = mouse.y-yPosition
            if(rect.resizeTarget.y+yOffset>0 && rect.resizeTarget.height-yOffset>minimumHeight){
                rect.resizeTarget.y = rect.resizeTarget.y+yOffset
                rect.resizeTarget.height = rect.resizeTarget.height-yOffset
            }
        }
    }

    MouseArea{
        id:bottomY
        height: mouseRegion
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.rightMargin: 0
        anchors.leftMargin: 0
        anchors.bottomMargin: 0
        cursorShape: Qt.SizeVerCursor
        property int yPosition: 0
        onPressed: {
            yPosition = mouse.y
        }

        onPositionChanged: {
            var yOffset = mouse.y-yPosition
            var yHeight = rect.resizeTarget.height+yOffset
            var availableHeight = rect.resizeTarget.parent ? rect.resizeTarget.parent.height : Screen.desktopAvailableHeight
            if(yHeight+rect.resizeTarget.y<availableHeight && yHeight>minimumHeight){
                rect.resizeTarget.height = yHeight
            }
        }
    }

    MouseArea{
        width: mouseRegion
        height: mouseRegion
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.leftMargin: 0
        cursorShape: Qt.SizeFDiagCursor
        property int xPosition: 0
        property int yPosition: 0
        onPressed: {
            xPosition = mouse.x
            yPosition = mouse.y
        }

        onPositionChanged: {
            var xOffset = mouse.x-xPosition
            if(rect.resizeTarget.x+xOffset>0 && rect.resizeTarget.width-xOffset>minimumWidth){
                rect.resizeTarget.x = rect.resizeTarget.x+xOffset
                rect.resizeTarget.width = rect.resizeTarget.width-xOffset
            }
            var yOffset = mouse.y-yPosition
            if(rect.resizeTarget.y+yOffset>0 && rect.resizeTarget.height-yOffset>minimumHeight){
                rect.resizeTarget.y = rect.resizeTarget.y+yOffset
                rect.resizeTarget.height = rect.resizeTarget.height-yOffset
            }
        }
    }

    MouseArea{
        width: mouseRegion
        height: mouseRegion
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.rightMargin: 0
        cursorShape: Qt.SizeBDiagCursor
        property int xPosition: 0
        property int yPosition: 0
        onPressed: {
            xPosition = mouse.x
            yPosition = mouse.y
        }

        onPositionChanged: {
            var xOffset = mouse.x-xPosition
            var xWidth = rect.resizeTarget.width+xOffset
            var availableWidth = rect.resizeTarget.parent ? rect.resizeTarget.parent.width:Screen.desktopAvailableWidth
            var availableHeight = rect.resizeTarget.parent ? rect.resizeTarget.parent.height : Screen.desktopAvailableHeight

            if(xWidth+rect.resizeTarget.x<availableWidth && xWidth>minimumWidth){
                rect.resizeTarget.width = xWidth
            }
            var yOffset = mouse.y-yPosition
            if(rect.resizeTarget.y+yOffset>0 && rect.resizeTarget.height-yOffset>minimumHeight){
                rect.resizeTarget.y = rect.resizeTarget.y+yOffset
                rect.resizeTarget.height = rect.resizeTarget.height-yOffset
            }
        }
    }

    MouseArea{
        width: mouseRegion
        height: mouseRegion
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.leftMargin: 0
        anchors.bottomMargin: 0
        cursorShape: Qt.SizeBDiagCursor
        property int xPosition: 0
        property int yPosition: 0
        onPressed: {
            xPosition = mouse.x
            yPosition = mouse.y
        }
        onPositionChanged: {
            var xOffset = mouse.x-xPosition
            var availableWidth = rect.resizeTarget.parent ? rect.resizeTarget.parent.width:Screen.desktopAvailableWidth
            var availableHeight = rect.resizeTarget.parent ? rect.resizeTarget.parent.height : Screen.desktopAvailableHeight
            if(rect.resizeTarget.x+xOffset>0 && availableWidth-xOffset>minimumWidth){
                rect.resizeTarget.x = rect.resizeTarget.x+xOffset
                rect.resizeTarget.width = rect.resizeTarget.width-xOffset
            }
            var yOffset = mouse.y-yPosition
            var yHeight = rect.resizeTarget.height+yOffset
            if(yHeight+rect.resizeTarget.y<availableHeight && yHeight>minimumHeight){
                rect.resizeTarget.height = yHeight
            }
        }
    }


    MouseArea{
        width: mouseRegion
        height: mouseRegion
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        cursorShape: Qt.SizeFDiagCursor
        property int xPosition: 0
        property int yPosition: 0
        onPressed: {
            xPosition = mouse.x
            yPosition = mouse.y
        }
        onPositionChanged: {
            var xOffset = mouse.x-xPosition
            var xWidth = rect.resizeTarget.width+xOffset
            var availableWidth = rect.resizeTarget.parent ? rect.resizeTarget.parent.width:Screen.desktopAvailableWidth
            var availableHeight = rect.resizeTarget.parent ? rect.resizeTarget.parent.height : Screen.desktopAvailableHeight

            if(xWidth+rect.resizeTarget.x<availableWidth && xWidth>minimumWidth){
                rect.resizeTarget.width = xWidth
            }
            var yOffset = mouse.y-yPosition
            var yHeight = rect.resizeTarget.height+yOffset
            if(yHeight+rect.resizeTarget.y<availableHeight && yHeight>minimumHeight){
                rect.resizeTarget.height = yHeight
            }
        }
    }
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

QML 可拖拽边框和顶点调整大小组件（新增对主窗口支持）的相关文章

DOCKER windows 7 详细安装教程

Edit DOCKER windows安装编者 xff1a xiaym 日期 xff1a 2015年1月20日排版工具 xff1a 马克飞象 QQ 252536711 DOCKER windows安装 1 下载程序包2 设置环境变量3
职场里不能与之结为团队的十种人

俗话说 xff1a 女怕嫁错郎 xff0c 男怕入错行同样 xff0c 一个人进入职场最怕的就是遇上了自己无法与其默契的某些团队成员 xff0c 这会影响到自己的事业进取 xff0c 影响到自己努力奋斗的成果收获 xff0c 影响到自己做
python读取大疆P1相机POS

大疆P1相机读取POS xff0c 算法不是很好 xff0c 但是可以用未来有好的算法再贡献 import os import os path import exifread workspace 61 r 39 G 20210727 39
Java数据结构之Lambda表达式

目录 1 背景1 1 Lambda表达式的语法1 2 函数式接口 2 Lambda表达式的基本使用3 变量捕获3 1 匿名内部类的变量捕获3 2 Lambda的变量捕获 4 Lambda在集合当中的使用4 1 Collection接口4 2
docker学习笔记

一 docker简介 xff1a 1 是什么 xff1a xff08 1 xff09 为什么会有docker出现 xff0c 将解决什么样的问题 xff1a 当我们在开发一个项目的时候 xff0c 假如您自己的电脑有您自己的开发环境 xff
iserver配置https加密通信

1 升级iserver为https访问 xff1a iserver是部署在tomcat中 xff0c 所以只要配置tomcat的相关配置就可以 xff1a xff08 1 xff09 https访问需要用到证书 xff0c 因此需要准备相关
ZeroMQ发布订阅模式之多进程实现

ZeroMQ的发布订阅模式是单向的数据发布 xff0c 服务器 xff08 即消息发布方 xff09 将更新的消息事件推送到一组客户端 xff08 即订阅方 xff09 消息发布者创建ZMQ PUB类型的socket并将消息发送到消息队列
java面试清单和书籍推荐五颗星五颗星

前言面试必备技能清单 xff0c 这里不会详细论述 xff0c 更多的是清单列举 xff0c 罗列一些关键字和链接注释数据结构与算法排序算法选择排序冒泡排序插入排序快速排序快速排序 xff08 普通 xff0c 二路 xff0c 三
ssh Key exchange was not finished sshd

报错 xff1a ssh Key exchange was not finished 则需修改sshd文件链接 xff1a Key exchange was not finished connection is closed近期遇到这个错
C++类成员冒号初始化以及构造函数内赋值

通常我们对类成员进行初始化有两种方式 xff1a 1 构造函数后面跟冒号 xff1b 2 构造函数里面对成员进行赋值有些人不太注意这个小细节 xff0c 或者根本不知道他们的区别 xff0c 认为两种方式是一样的这个误解有时可能会对
Web项目中pom.xml中＜Project＞爆红

artifactId 39 with value 39 项目名 39 does not match a valid id pattern 主要是项目名中 lt artifactId gt 项目名 lt artifactId gt 项目名带空
《自动化学报》踩坑心得

LATEX使用于文本编辑器此次我是用的是latex安装方法是TeXLive 43 WinEdt 模板使用的是自动化学报模板 xff0c 使用的是中文模板 xff0c for paper in Chinese 文件 xff0c 打开之后选择打
个人介绍以及课程期待

本人朱杰 xff0c 现为北京理工大学大二学生 xff0c 主攻软件工程 xff0c 性格开朗现在正在学习软件工程基础 xff0c 特写此文 xff0c 以明志我希望能通过这门课能够更系统的了解软件工程 xff0c 之前对此的认知都是很
向日葵提示‘’连接断开‘’解决方法（已解决非常好用）终端执行 xhost + 即可

1 这个是授权访问 xff0c 一般输入xhost 43 即可向日葵远程桌面提示连接断开解决方法终端执行 xhost 43 即可 xhost 43 是使所有用户都能访问Xserver xhost 43 ip使ip上的用户能够访问Xser
对vector使用指针

include lt stdio h gt include lt iostream gt include lt vector gt using namespace std int main vector lt int gt a b c fo
岁月划过生命线(我的2013-大二.上)

岁月划过生命线大二上又一次大清早被红马甲查赶出被窝 xff0c 让哥光着屁股就跑到隔壁宿舍去了 xff0c 真心恨死他们这是一篇最早写于 2013 11 26 日的日志 xff0c 通过后来不断地增删改 xff0c 来总结 xff0
带中文字库的12864LCD显示程序

带中文字库的12864LCD显示程序 include lt reg52 H gt include lt intrins H gt define uchar unsigned char define uint unsigned int sbi
QML 自定义Legend（点击Legend隐藏/显示）

QML ChartView中提供了默认的Legend xff0c 可对图例进行一些简单的例如颜色字体等的设置 xff0c 但是当需要图例具有个性化的功能时 xff08 如单击时隐藏或显示 xff09 时 xff0c 就需要使用自定义的Le
Qt多线程中使用QTimer（常见问题汇总）

我们经常需要将一些耗时的工作在子线程中进行 xff0c 同时在子线程中又需要用到循环事件时 xff0c 一种方法使用While sleep 进行线程控制另一种创建一个QTimer对象 xff0c 使用信号与槽机制将信号timeout 与相
Qt 中使用 VLC-Qt 播放网络视频流（附实例）

VLC Qt库 xff1a 一个在libVLC基础上结合了Qt框架的开源库它提供了媒体播放的视频音频处理控制的核心类 xff0c 并提供基于QWidget和QML的GUI框架效果图 xff1a 官网地址 xff1a Quickly c

随机推荐

微信小程序云开发处理微信支付成功的回调函数（云函数实现）

在使用微信小程序开发微信支付功能时 xff0c 使用云开发中的微信支付云调用 xff0c 将商品信息支付价格等信息传入云函数中 xff0c 并在返回的字段payment获取wx requestPayment接口所需要的所有信息通过此方法
前端大数据 echarts

https echarts apache org handbook zh basics download
Qt使用钩子后台监控键盘并在界面中响应

当我们的Qt程序需要在后台监听键盘的操作或者屏蔽键盘的操作时 xff0c 就需要用到系统的API xff0c 因此用到Windows钩子 xff0c 下面简单介绍下使用钩子监控键盘按键 xff0c 原理较简单 xff0c 代码上我都注释了
Qt 5.15.2添加msvc2019编译环境（不需要安装VS）

安装Qt5 15 2 只能在线安装 xff0c 安装时候注意勾选MSVC 2019 64 bit支持 xff0c 其他的根据自己需要勾选 xff0c 点击下一步等待Qt安装完毕 xff0c 此时QtCreator中Kits里Desktop
QML Map中使用Open Street Map(osm)离线地图（瓦片地图加载方式）

当使用QML Map显示地图时 xff0c 有时候无法连接互联网 xff0c 因此需要使用离线模式加载地图 xff0c 加载离线地图瓦片时 xff0c 需要为插件设置参数信息 xff0c 其中name表示参数字段 xff0c value表示
Qt Creator 无法编辑Qml界面，报错：“Qt Quick emulation layer crashed”

今日在Qml界面编辑中 xff0c 突然无法使用设计师编辑器 xff0c 并报错如图 xff1a 代码定位也无法定位到错误的位置处 xff0c 通过注释代码的方式检查后 xff0c 发现错误产生原因是某个部件设置了两个状态State xff
QML中使用QPen设置组件边框（以CandlestickSeries为例）

QML中提供了很多组件是由C 43 43 中绘制而注册到QML中使用的 xff0c 这些组件采用QPen绘制组件边框 xff0c 这样的组件均可使用返回QPen的方法设置边框样式例如CandlestickSeries就提供了数据展示的蜡烛
Qt QML 自绘GPS方位校北仪控件

校北仪用于显示不同设备与参照方位之间的误差夹角 xff0c 如果仅仅使用柱状图显示多个不同设备误差的数值 xff0c 数据不够直观表示 xff0c 因此自己画一个 xff0c 效果如图 xff1a 该控件使用QQuickPaintedIte
QML 地图修改插件源码（三），Map在Plugin中设置加载地图类型

常用的地图种类分为交通图 xff0c 地形图 xff0c 卫星图等等 xff0c 在QML的Map xff08 以OSM地图为例 xff09 中提供activeMapType属性用于读取当前显示的地图类型 xff08 注意 xff1a 该属
QML 地图修改插件源码（四），Map根据目录作为索引加载地图瓦片

QML中的地图以OSM为例在使用过程中会发现当地图层数很多时 xff0c 特别是如果使用离线地图且地图层级较多时地图会变得很卡 xff08 在线地图加载的层级数多且不清除缓存时也会卡 xff09 xff0c 原因在于QML地图插件对地图
Qt Quick 3D中将3D场景(如.obj)转换为.mesh

Qt 5 15以后提供了Qt Quick 3D的新模块 xff0c 该模块可使用可视化的方式即可进行3D模型的显示 xff0c 并且相较于Qt 3D来说 xff0c 该模块的API更为高级 xff0c 使用者不需要自己设计底层的细节该模块
Qt Quick 3D系列（一）：加载3d模型

如果我们想在QML中使用3D且你之前没有三维程序开发的基础 xff0c 使用Qt Quick 3D是个不错的选择 xff0c 下面我介绍如何使用Qt Quick 3D加载3d模型注意 xff1a Qt Quick 3D从Qt 5 15之后
boa常见错误整理

错误1 xff1a bison y d boa grammar y gcc g O2 pipe Wall I c o y tab o y tab c y tab c In function yyparse y tab c 1295 warn
Qt Quick 3D系列（二）：鼠标控制3D模型旋转缩放

上一篇文章Qt Quick 3D系列 xff08 一 xff09 xff1a 加载3d模型我们讲述了如何在Qt Quick 3D中显示一个3D模型 xff0c 那么显示了3D模型后如何使用鼠标进行旋转呢 xff1f 在Qt 3D中提供了Or
Qt Quick 3D系列（三）：设置三维模型的金属光泽材质

前面的博客中介绍了如何在Qt Quick 3D中加载三维模型 xff0c 下面介绍如何设置三维模型的材质 xff0c 例如下图模型我需要设置为金属材质时 xff0c 设置该Model的materials为PrincipledMateria
Qt Quick 3D系列（四）：为三维模型添加动画效果

Qt Quick 3D旨在让那些熟悉QML开发的人能够使用非常少的学习成本实现3D开发 xff0c 因此对于三维模型动画没有类似与Qt 3D中有个专门的Qt3DAnimation来控制动画效果 xff0c 而是直接使用QML中的Animat
Qt Quick 3D系列（五）：三维模型展示示例

为了展示一个好看的3D模型 xff0c 需要对模型设置背景 xff0c 设置三维材质 xff0c 设置周围光线 xff0c 设置模型阴影等等下面示例展示了一个比较好看的三维模型效果 xff0c 大家可以先在C4D等调整好模型效果 xff0
QML 地图可拖拽位置标签组件

在地图上显示位置信息时 xff0c 有时候需要同时显示该位置的详细信息该组件可在地图上显示一个连接到地图地理位置的标签框 xff0c 该标签框可点击进行拖拽在地理位置改变地图缩放地图平移时 xff0c 该标签框的相对位置保持不变 x
使用QQuaternion对Qt Data Visualization中模型进行旋转

在Data Visualization中 xff0c 三维显示的OBJ需要旋转时使用rotation属性 xff0c 但是该属性传入的值是一个四元数QQuaternion xff0c 直接赋值四元数很复杂 xff0c 因此使用转化的方式获得
QML 可拖拽边框和顶点调整大小组件（新增对主窗口支持）

QML项目开发过程中 xff0c 有时候需要对控件大小和位置进行人为调整 xff0c 因此设计该组件该组件鼠标置于边框和顶点位置时鼠标样式对应改变 xff0c 拖动边框可修改该方向组件大小 xff0c 拖动顶点可修改组件处横纵向组件大小

QML 可拖拽边框和顶点调整大小组件（新增对主窗口支持）

QML 可拖拽边框和顶点调整大小组件（新增对主窗口支持） 的相关文章

随机推荐

热门标签

QML 可拖拽边框和顶点调整大小组件（新增对主窗口支持）的相关文章