如何使用自定义形状创建QML滑块？

Question

我必须创建一个自定义形状的滑块，如下图所示（蓝色是滑块手柄）：

红色一个是凹槽，蓝色一个是手柄。

Answer 1

对于凹槽，您可以使用任何Item绘制此形状，例如Image 对于句柄，您只需使用Rectangle并根据Slider.position放置，例如像这样：

Slider {
    id: slider
    width: 400
    height: 150
    y: 200
    handle: Rectangle {
        x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
        y: Math.max(slider.topPadding, slider.availableHeight - height + slider.topPadding - ((slider.availableHeight - height) * (slider.position * 2)))
        width: 15
        height: 30
        radius: 5
        color: 'blue'
    }
}

如果你有一个陌生人的形状，只需更改y的功能。
您可以使用将值position（范围[0,1]）映射到y值的任何函数。您可以使用滑块的每个属性来计算合适的位置。

这是另一个例子，滑块绘制正弦函数：

Slider {
    width: 400
    height: 150
    id: slider1
    y: 200
    handle: Rectangle {
        x: slider1.leftPadding + slider1.visualPosition * (slider1.availableWidth - width)
        y: slider1.topPadding + (slider1.availableHeight - height) / 2  + (slider1.availableHeight - height) / 2 * Math.sin(slider1.position * 10)
        width: 15
        height: 30
        radius: 5
        color: 'blue'
    }
}

这里有趣的是：随机功能。但我不认为你可以为它绘制合适的凹槽

Slider {
    id: slider
    width: 400
    height: 150
    y: 200
    onPositionChanged: {
        var a = Math.round(Math.random() * 5) - Math.round(Math.random() * 5)
        console.log(a)
        handle.handleY = handle.y + (a)
        console.log(handle.handleY)
    }
    handle: Rectangle {
        property int handleY: slider.topPadding + slider.availableHeight / 2 - height / 2
        x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
        y: Math.max(slider.topPadding, Math.min(handleY, slider.availableHeight - height + slider.topPadding))
        width: 15
        height: 30
        radius: 5
        color: 'blue'
    }
}

Answer 2

您可以使用Canvas或Qt C ++（example with a circular slider）直接在QML中执行此操作，然后将该元素公开给QML。虽然不是直接复制粘贴解决方案，但请检查this以查看使用arc()绘制元素的自定义循环进度条。如果你想要直线，你可以使用line()。滑块的行为也是您必须自己完成的。

您可以尝试从Slider继承，尝试获取元素所需的一些（甚至大部分）功能。