QML自定义可长按短按的SpinBox

默认长按+10.短按+1

主要难点在区分长按和短按,以1s为界限.这里我使用了四个定时器用于实现加和减的长短按操作.

shortClickTimer定时器用来在鼠标松开的时候判断是否是短按:
如果是短按的话我们需要借助forbidClickTimer定时器短暂禁用Click事件,否则会出现长按松开的时候+10后又+1的情况.
如果不是短按的话需要停止longPressminuxTimer/longPressminuxTimer定时器,这两个定时器如果没有被停止,将会在1s后执行+10/-10的操作(也就是长按后每秒产生的效果).

变量说明:
iStepSize短按的步进
iStartValue最小值
iEndValue最大值
iValue当前值
iLongStepSize长按的步进

import QtQuick 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

Rectangle{
    id:playbackBox
    property int iStepSize: 1
    property int iStartValue: 1
    property int iEndValue: 200
    property int iValue: 1
    property int iLongStepSize: 10
    width: 300
    height:50
    //显示框
    Rectangle{
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: minusBtn.right
        anchors.right: addBtn.left
        border.color: "#CCCCCC"
        border.width: 1
        Text{
            anchors.fill: parent
            text:String(iValue)
            font.pixelSize: 30
            font.weight: Font.Bold
            color: "black"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }
    //+按钮
    Rectangle{
        id:addBtn
        anchors.right: parent.right
        width: parent.height
        height: parent.height
        border.color: "#CCCCCC"
        border.width: 1
        Canvas {
            id:addImg
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d")
                //画+
                var x = parent.height / 3;
                var y = parent.height / 2;
                ctx.beginPath()
                ctx.strokeStyle = "rgb(0, 0, 0)";
                ctx.lineWidth = 3
                ctx.moveTo(x, y);
                ctx.lineTo(addImg.width - x, y)
                x = parent.height / 2;
                y = parent.height / 3;
                ctx.moveTo(x, y);
                ctx.lineTo(x, addImg.width - y)
                ctx.stroke()
            }
        }
        //长按+10, 以及规避长按松开后触发onClicked导致再+1问题
        MouseArea{
            anchors.fill: parent
            onPressed: {
                if(!shortClickTimer.running)
                {
                    shortClickTimer.start()
                }

                if(!longPressAddTimer.running)
                {
                    longPressAddTimer.start();
                }
                addBtn.color = "#f0f0f0";
            }
            onReleased: {
                if(!shortClickTimer.running)
                {
                    forbidClickTimer.start();
                }
                longPressAddTimer.stop();
                addBtn.color = "#ffffff";
            }
            onClicked: {
                if(forbidClickTimer.running)
                {
                    return;
                }
                if(iValue >= iEndValue)
                {
                    return;
                }
                iValue += iStepSize;
            }
        }
        Timer{
            id:longPressAddTimer
            running: false
            repeat: true
            interval: 1000
            onTriggered: {
                if(iValue + iLongStepSize > iEndValue)
                {
                    iValue = iEndValue;
                }
                else
                {
                    iValue += iLongStepSize;
                }
            }
        }
    }
    Rectangle{
        id:minusBtn
        anchors.left: parent.left
        width: parent.height
        height: parent.height
        border.color: "#CCCCCC"
        border.width: 1
        Canvas {
            id:minImg
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d")
                //画-
                var x = parent.height / 3;
                var y = parent.height / 2;
                ctx.beginPath()
                ctx.strokeStyle = "rgb(0, 0, 0)";
                ctx.lineWidth = 3
                ctx.moveTo(x, y);
                ctx.lineTo(minImg.width - x, y)
                ctx.stroke()
            }
        }
        MouseArea{
            anchors.fill: parent
            onPressed: {
                if(!shortClickTimer.running)
                {
                    shortClickTimer.start()
                }
                if(!longPressminuxTimer.running)
                {
                    longPressminuxTimer.start();
                }
                minusBtn.color = "#f0f0f0";
            }
            onReleased: {
                if(!shortClickTimer.running)
                {
                    forbidClickTimer.start();
                }
                longPressminuxTimer.stop();
                minusBtn.color = "#ffffff";
            }
            onClicked: {
                if(forbidClickTimer.running)
                {
                    return;
                }
                if(iValue <= iStartValue)
                {
                    return;
                }
                iValue -= iStepSize;
            }
        }
        Timer{
            id:longPressminuxTimer
            running: false
            repeat: true
            interval: 1000
            onTriggered: {
                if(iValue - iLongStepSize < iStartValue)
                {
                    iValue = iStartValue;
                }
                else
                {
                    iValue -= iLongStepSize;
                }
            }
        }
        //长按松开后不触发点击事件
        Timer{
            id:forbidClickTimer
            running: false
            repeat: false
            interval: 20
        }
        Timer{
            id:shortClickTimer
            running: false
            repeat: false
            interval: 999
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198