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

Posted 2023-02-16

【中文标题】如何使用自定义形状创建 QML 滑块？

【英文标题】：How to create QML slider with a custom shape?

【发布时间】：2017-05-05 04:58:20

【问题描述】：

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

红色的是凹槽，蓝色的是把手。

【问题讨论】：

random shape 是什么意思？

@eyllanesc 是的，措辞不准确。我确实相信 snehitha 的意思是一个滑块，其表单在 QML 中不是默认的。

【参考方案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'
    

【参考方案2】：

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

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