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

问题描述：

我要创建的滑块与如下所示（蓝色是滑块手柄）的一个自定义的形状：如何使用自定义形状创建QML滑块？

红颜色之一是槽和蓝色之一被处理。

你是什么意思'随机形状？ – eyllanesc

@ eyllanesc是的，措辞是不准确的。我确实相信snehitha意味着一个滑块，其形式不会在QML中默认使用。 – rbaleksandar

答

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

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

答

对于凹槽，您可以使用任何Item来绘制此形状，例如， a 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' 
    } 
}

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

相关推荐