2024-08-01 QML开发小技巧二

正文

qml中组件Slider，也就是我们常用的进度条，如果有进度条from~to值比较大，比如0到1000，而且setpSize设置为1，在拖动进度条时，它value的值变化并不是按1来变化的，可能不会满足我们的需求，这时候可以简单为手动细化步进

      Slider {
            id: progress
            width: 500
            from: 0
            stepSize: 1
            to: 1000
            value: 0
            snapMode: Slider.SnapOnRelease
            background: Rectangle {
                x: progress.leftPadding
                y: progress.topPadding + progress.availableHeight / 2 - height / 2
                implicitWidth: progress.implicitBackgroundWidth
                implicitHeight: 8
                width: progress.availableWidth
                height: progress.implicitBackgroundHeight
                radius: 4
                color: "#bdbebf"

                Rectangle {
                    width: progress.visualPosition * parent.width
                    height: parent.height
                    color: "#1177ff"
                    radius: 2
                }
            }
            handle: Rectangle {
                x: progress.leftPadding + progress.visualPosition
                   * (progress.availableWidth - width)
                y: progress.topPadding + progress.availableHeight / 2 - height / 2
                implicitWidth: 20
                implicitHeight: 20
                radius: 10
                color: progress.pressed ? "#f0f0f0" : "#f6f6f6"
                border.color: "#bdbebf"
            }

            property int lastValue: 0
            function updateValue(newValue) {
                var delta = newValue - lastValue

                if (Math.abs(delta) >= 1) {
                    var step = delta > 0 ? 1 : -1
                    while (lastValue !== newValue) {
                        lastValue += step
                        value = lastValue
                    }
                }
            }
            onMoved: {
                updateValue(value)
            }
            onValueChanged: {
                console.log(value)
            }

            focus: true
            Keys.onLeftPressed: {
                value--
            }
            Keys.onRightPressed: {
                value++
            }
            Keys.onSpacePressed: {

            }
        }

这里 updateValue 函数可用来细化步进

但如果这样使用时需要注意个问题，如果value绑定的操作会影响性能的话，建议不要这样使用，特别是影响到到界面的。

别外说明一点，如果需要键盘事件，使用 Keys 直接添加即可，Slider 本身有实现键盘事件，重新实现键盘事件，会覆盖掉其自身已实现的键盘事件，