【QML】MouseArea

前言

学习自：B站【英文字幕】Qt quick（QML)技术解读入门到熟练

MouseArea支持简单的鼠标操作

过程

1.鼠标操作区域，定位为小矩形内

anchors.fill: blueRec

设计模式看鼠标有效区域

2.类似按钮信号槽操作，

        onClicked: {Qt.quit();}

点击有效区域，蓝色小矩形，执行触发函数：退出应用程序，执行有效。

3.设置覆盖有效，覆盖等于按键，设置覆盖时的槽函数用onEntered:{ }函数

       hoverEnabled: true;onEntered: {blueRec.color ="red"blueRec.rotation = 45}

覆盖矩形区域时，触发槽函数，蓝色矩形框颜色变为红色，角度旋转45度

4.把文本Text放到矩形Rec和鼠标区域MouseA后声明，文本会显示在矩形框内，但是矩形旋转时，文本不会跟着旋转，解决方案：给文本Text一个id，在覆盖触发槽函数内写入文本旋转

onEntered: {blueRec.color ="red"blueRec.rotation = 45fooText.rotation = 45}Text {id:fooText

5.设置覆盖离开退出时的恢复的函数onExited:{ }函数

onExited: {blueRec.color ="blue"blueRec.rotation = 0fooText.rotation = 0}

6.在点击信号槽函数内，改为 console.log() 函数打印出"hello from QML"

onClicked: {console.log("hello from QML")}

7.console.log打印出矩形框的颜色，打印出的颜色是十六进制颜色码

onClicked: {console.log(blueRec.color)}

【QML】MouseArea相关推荐

【QML】Attached Properties 附加属性
Attached Properties 官方文档介绍: Attached Properties and Attached Signal Handlers 什么是Attached Properties? ...
【QML】实现一个炫酷小键盘
个人声明: 由于之前发现有人将博客转载到私人博客上,并没有标记博文转载出处,所以在此将个人声明放置在最文章的最开头,希望转载的博主能够通知我一声,尊重一下别人的成果.以下内容,纯属个人观点,不喜 ...
【QML】QML性能优化 | 3D场景优化
文章目录一.四种3D场景设计方式 (1-1)低级场景 (1-2)高级场景 (1-2)混合场景 (1-3)Vertex颜色场景二.3D场景优化规则 (2-1)Scene Graph (2-2)资源文 ...
【QML】分享一个纯QML实现的2048小游戏
随着QT6的问世,UI设计+Qt代码联动的设计方式在Qt Creator中已经变成了不可用状态(虽然可以手动打开),官方开始推广用QML来进行界面设计,当时蠢蠢欲动做了一个小游戏,忽然想起来分享一下, ...
【qml】Image 显示网络图片
一.说明 Image类型可以用来显示一个图像. 使用source属性将图像的源指定为一个URL.可以用Qt支持的任何标准图像格式提供图像,包括位图格式(如PNG和JPEG)和矢量图形格式(如SVG). ...
【QML】解决 “TypeError: Property ‘hello‘ of object CppObject(0x55674a9516a0) is not a function”
目录 1.遇到问题 2.问题解决 1.遇到问题没有这个函数. 2.问题解决 #include <QGuiApplication> #include <QQmlApplication ...
【QML】C++访问QML函数获取返回值时报：Unable to invoke methods with return values in queued connections
QMetaMethod::invoke: Unable to invoke methods with return values in queued connections 相关资料可以参考:http ...
【qml】设置Component内多级子孙元素的属性的快捷方法
如:想要设置下面代码中Text子元素的text属性.可以在根元素定义一个属性,然后把想要设置的子孙元素的属性和根元素这个属性关联即可. Window {property string realText ...
【Qt】QML快速入门7——输入元素
QML快速入门 [Qt]QML快速入门1--语法:https://blog.csdn.net/See_Star/article/details/113729827 [Qt]QML快速入门2--基本元素 ...

【QML】MouseArea

【QML】MouseArea相关推荐

最新文章

热门文章