Qml 编写遥控器转盘按钮

最新推荐文章于 2024-07-15 10:37:50 发布
最新推荐文章于 2024-07-15 10:37:50 发布
阅读量957 收藏
点赞数
分类专栏： QML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CLinuxF/article/details/109462536
版权
本文介绍如何使用Qml实现一个类似遥控器转盘的按钮。通过Canvas组件，作者详细阐述了画扇形、中间圆以及实现点击判断的步骤。最终，通过封装的方法实现了扇形和圆的绘制，并通过象限判断来确定点击位置。
摘要由CSDN通过智能技术生成

文章目录

前言

今天开发android ，看到有个需求是实现一个类似于转盘的按钮，如下图：
在这里插入图片描述
我这边使用qml实现界面的，所以在网上所搜一遍，也没发现有现成可以继承的，大多数都是android的现成UI实现库，对于我而言，没有实际意义，所以只能自己实现了

先贴下我实现的效果图，下面这个图是我自己用qml实现的
在这里插入图片描述

实现思路

使用qml实现，这个难度其实是很大的，它不想QWidget可以QPainter，也没有特定的多边形矩形或者扇形接口，一切等于都要自己从无到有自己实现，本来我开始是考虑使用QWidget的QPainter自己画，也就是继承QQuickPaintedItem， 之前我有一篇画虚线的文章

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Fu_Lin_
关注
专栏目录
订阅专栏
Qt之自绘遥控器圆形主控按钮
草上爬的博客
03-14 8742
Qt之自绘遥控器圆形主控按钮，云台的控制器也是这个样子的，其实贴图也能做，但是没自绘灵活。
用QML实现不规则圆盘的方法
liujing_sy的博客
08-30 1306
用QML实现不规则圆盘的方法，切图实现 由于圆盘的形状是不规则的，比较简单的实现方法是通过切图的方式来时实现，在clicked事件里面，添加替换图片的语句，就可以实现。 上面的扇形是，图片，下面的圆形也是图片，通过两个Rectangle，放入一个Image元素，点击时替换背景图片。 重点是如何实现扇形每个分区的onclicked事件。 我是通过定位实现的，我的每个分区中需要放入一...
qml 拨盘旋钮Dial 控件滑动开关Switch
qq_33373173的博客
11-21 1949
拨盘旋钮 Dial 属性 angle : 可设置保持手柄的角度 from : 保存范围的起始值。默认值为0.0 handle : 保存转盘的手柄 live : 保存在拖动手柄时拨盘是否为value属性提供实时更新 position : 保存句柄的逻辑位置 pressed : 保存是否按下拨盘 snapMode : 保存捕捉模式 stepSize : 保存步长 to : 保存范围的最终值。默认值为1.0 value : 保存值在from-to范围内。默认值为0.0 wrap : 保存在拖动时是否绕转盘 启
Qt-绘制运动方向控制按钮
最新发布
weixin_69505365的博客
07-15 470
3.继承QWidget，按照CAD中的坐标点绘制，并添加一些颜色变化。2.调整CAD中的坐标系，与Qt窗口坐标系一致，如图所示Y方向朝下。1.在AutoCAD中绘制自己想要的按钮轮廓。
QML/C++的BLE蓝牙小车遥控器（开源）
qq_35342292的博客
03-08 1597
软件使用QML/C++混合编程实现的，目前仅支持BLE低功耗蓝牙的连接，可能会在以后的版本支持SPP的蓝牙。 提供按键和转盘实现对小车的控制，基本原理都是按下按键或转盘转到一定角度区间会发送相应的指令（都是单字符），松开手指时会发送停止指令。 注意： 不支持SPP的蓝牙，后续可能会更新 修改后的指令只是临时的，后续会采用文件存储的方式保存修改的指令 必须先右滑转到程序的连接界面连接蓝牙才可以发送...
QML 实现圆形按钮
fuying1234的专栏
02-12 2297
import QtQuick 2.0 import QtQuick.Controls 1.2 Rectangle {     id:radio     width: 92     height: 92     radius: 50     border.color: "#2EB2B5"        //边框颜色     border.width: 1          
QML编写简单的图片查看器
08-09
在本文中，我们将深入探讨如何使用QML（Qt Meta Language）编写一个简单的图片查看器。QML是Qt框架的一部分，它提供了一种声明式语言，用于构建用户界面和图形组件。对于初学者来说，QML提供了直观且易于理解的语法...
qml控件：自定义图标按钮
04-21
本篇将详细介绍如何在Ubuntu 16.04上，利用Qt 5.7.1版本，通过QML实现一个自定义的图标按钮控件。我们将主要探讨以下几个知识点： 1. **QML基础知识**： QML是Qt的一个重要部分，它是一种声明式语言，用于构建用户...
QML实现安卓风格开关按钮
10-25
用比较简单的方法实现了安卓风格的开关按钮，用QML实现的，没用画板Canvas，点击可用切换开和关
QtKnobs：基于Qt和QML的旋钮
02-05
QtKnobs：基于Qt和QML的旋钮
QML实现异型按钮
07-10
qml完美实现异型按钮，本项目是在Qt5.11.1上建立的，需要的朋友请在高版本Qt上运行
QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)
12-03
QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)里面有自定义的介绍以及一个已经实现的仪表盘
Qt方向盘示例
10-09
Qt 实现方向盘效果 外加示例代码
基于QT的圆形旋钮
06-06
基于QT的圆形旋钮，圆形旋钮，带有方向显示的.。。。。
Android笔记--自定义控件仿遥控器的圆形上下左右OK圆盘按钮
weixin_34217773的博客
03-09 915
2019独角兽企业重金招聘Python工程师标准>>> ...
qml使得图片旋转
sono_io的博客
02-25 1262
Image { id: loginSuccessLogo source: "qrc:/image/Icon.png" anchors.top: parent.top anchors.topMargin: 79 anchors.left: parent.left anchors.leftMargin: 44 visible: true NumberA.
QML编程：实现一个数字软件盘的功能(一)
JieZuoWangDao的专栏
05-24 1392
　　本文描述如何通过QML编程实现一个满足自己需求的数字软件盘的功能, 功能需求： 　　1.可以查看临时数值设置， 　　2.可以通过滑动slider实现快速设置 　　3.原值记录功能 首先根据功能需求设计小键盘的风格，可分为临时数值显示区和输入区 画面脚本源码如下： import QtQuick 2.4 import QtQuick.Controls 2.3 import QtQ...
60.qt quick-qml方向盘控件(不需要任何图片资源,支持自定义大小)
抵抗时间扭曲，坚持做一件有意义的事
12-23 1506
由于QML高德地图教程需要实现一个方向盘来实现旋转地图和倾斜地图,如下图所示(已经实现完成了): 所以本章实现一个自定义的qml方向盘控件(不需要任何图片资源,支持自定义大小)、该demo免费、已上传之技术交流免费群779866667 1.效果图展示(支持改色、改背景图等) gif动图如下所示: 2.代码实现 import QtQuick 2.12 import QtQuick.Controls 2.5 import QtGraphicalEffects 1.12 import ..
QML 怎么实现自动点击按钮
05-11
在 QML 中实现自动点击按钮，可以使用 Qt Test 框架提供的 QTest::mouseClick() 方法。该方法可以模拟鼠标单击事件，从而实现自动点击按钮的操作。具体步骤如下： 1. 导入 Qt Test 框架： ```qml import QtTest 1.0 ``` 2. 给按钮设置 id： ```qml Button { id: myButton // ... } ``` 3. 在需要自动点击按钮的地方调用 QTest::mouseClick() 方法： ```qml myButton.clicked.connect(function() { // 自动点击按钮 QTest.mouseClick(myButton, Qt.LeftButton); }) ``` 其中，第一个参数是要模拟鼠标单击事件的对象，第二个参数表示要模拟的鼠标按钮类型。这里使用 Qt.LeftButton 表示模拟鼠标左键单击事件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Fu_Lin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值