2024-08-01 QML开发小技巧二
正文
qml中组件Slider，也就是我们常用的进度条，如果有进度条from~to值比较大，比如0到1000，而且setpSize设置为1，在拖动进度条时，它value的值变化并不是按1来变化的，可能不会满足我们的需求，这时候可以简单为手动细化步进
Slider {id: progresswidth: 500from: 0stepSize: 1to: 1000value: 0snapMode: Slider.SnapOnReleasebackground: Rectangle {x: progress.leftPaddingy: progress.topPadding + progress.availableHeight / 2 - height / 2implicitWidth: progress.implicitBackgroundWidthimplicitHeight: 8width: progress.availableWidthheight: progress.implicitBackgroundHeightradius: 4color: "#bdbebf"Rectangle {width: progress.visualPosition * parent.widthheight: parent.heightcolor: "#1177ff"radius: 2}}handle: Rectangle {x: progress.leftPadding + progress.visualPosition* (progress.availableWidth - width)y: progress.topPadding + progress.availableHeight / 2 - height / 2implicitWidth: 20implicitHeight: 20radius: 10color: progress.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}property int lastValue: 0function updateValue(newValue) {var delta = newValue - lastValueif (Math.abs(delta) >= 1) {var step = delta > 0 ? 1 : -1while (lastValue !== newValue) {lastValue += stepvalue = lastValue}}}onMoved: {updateValue(value)}onValueChanged: {console.log(value)}focus: trueKeys.onLeftPressed: {value--}Keys.onRightPressed: {value++}Keys.onSpacePressed: {}}
这里 updateValue 函数可用来细化步进
但如果这样使用时需要注意个问题，如果value绑定的操作会影响性能的话，建议不要这样使用，特别是影响到到界面的。
别外说明一点，如果需要键盘事件，使用 Keys 直接添加即可，Slider 本身有实现键盘事件，重新实现键盘事件，会覆盖掉其自身已实现的键盘事件，