QT QML 实现的摇杆按钮,类似王者荣耀 左边方向导航键

特点:在一定范围内,调整第一次按的点为中心点,然后可以开始滑动,输出坐标变化的值。

调试时辅助线显示出来如下图

此控件已封装为单独的qml组件, UI风格可更改,改图片就行

已封装为单独的QML组件文件,直接插入项目使用

提供信号如下:

1、开始按下信号

2、停止按下信号

3、X,Y坐标变化信号

可根据情况增加自定义信号

css 复制代码
property real   xAxis:                  0
property real   yAxis:                  0

signal timerControl(int status)
// 1  按下的信号
// 2  松手的信号
css 复制代码
    DirectBtnRange{
        id:bomdirecrangebtn
        anchors.right:          parent.right
        anchors.top:         parent.top
        anchors.rightMargin:    -xPositionDelta + 70 -20 - 20
        anchors.topMargin:    yPositionDelta + 100 +50
        width: 224 + 124*2
        height: 224 + 124*2
        color:              "transparent"
        onTimerControl: {
            if(status === 1){
                direcTimer.running = true
            }
            else{
                direcTimer.running = false
            }
        }
    }

    Timer{
        id:direcTimer
        interval: 100
        running: false
        repeat: true
        onTriggered: {
                console.log("bomdirecrangebtn.xAxis = __",bomdirecrangebtn.xAxis)
                console.log("bomdirecrangebtn.yAxis = __",-bomdirecrangebtn.yAxis)
        }
    }
相关推荐
慧都小项3 天前
当边缘AI上产线:QtitanDocking 如何让工业 HMI 实现多视图协同
人工智能·qt·ui·边缘计算·qt6.3
Quz3 天前
QML SwipeDelegate 滑动委托
qt
Quz3 天前
QML 列表中的四种委托:ItemDelegate、CheckDelegate、RadioDelegate、SwitchDelegate
qt
实心儿儿3 天前
Qt — 显示类控件
qt
江湖人称菠萝包4 天前
【Qt】《Qt 5.9 C++开发指南》笔记-Chapter9-Qt Charts
笔记·qt·qt5
扶尔魔ocy4 天前
【QT android】环境安装及第一个QT项目
qt·andriod开发
江湖人称菠萝包4 天前
【Qt】《Qt 5.9 C++开发指南》笔记-Chapter10-Data Visualization
笔记·qt·qt5
Cx330❀4 天前
Qt 常用控件属性与底层机制详解:从窗口半透明、浮点数陷阱到 QSS 与焦点策略
qt·ui·图形渲染
Quz4 天前
QML DelegateChooser:多条件组合与按列选择委托
qt
Quz4 天前
QML DelegateChooser:按角色选择委托与按索引选择委托
qt