如何自定义 QML Slider 刻度线？

Question

我正在尝试自定义 QML 滑块组件。

我知道用于 QtQuickControl 自定义的 QML Slider 和 QML SliderStyle 类型。根据文档 SliderStyle Doc 我应该能够为刻度线分配一个组件属性.

我尝试在下面的代码中这样做：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item{
    width: slid.width
    height: slid.height

property real maxValue: 5.0
property real minValue: 0.0
property real step: 1.0
property real sliderValue: 0

    Slider {
        id: slid
        anchors.centerIn: parent
        width: 800
        tickmarksEnabled: true
        maximumValue: maxValue
        minimumValue: minValue
        stepSize: step
        updateValueWhileDragging: true
        style: SliderStyle {
            groove: Image{
                    source: "images/sliderBG.png"
                    height: 32
                    width: 200
                }

            handle: Image{
                id: sliderHandle
                source: "images/sliderButtonUnpressed.png"
                width: 68
                height: 68
            }

            tickmarks: Text {
                id: ticks
                text: "|"
                font.family: "Myriad Pro"
                font.pointSize: 30
                color: "black"
                y: parent.y - 60
            }
        }

    }
}

但尽管有多个滑块步骤，但每当我尝试使用我的滑块时，只显示一个勾号。

我试图避免仅仅因为刻度线而不得不从头开始编写 QML 组件。也就是说，我分配刻度线的方式有问题吗？或者我可以尝试自定义另一种 QML 样式吗？或者其他一些解决方案？

提前致谢各位

Answer 1

QML Slider 中的默认刻度线值为：

property Component tickmarks: Repeater {
    id: repeater
    model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
    Rectangle {
        color: "#777"
        width: 1 ; height: 3
        y: repeater.height
        x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
    }
}

尝试在您的 Text 组件周围使用转发器

如何自定义 QML Slider 刻度线？

How to customize a QML Slider tickmark?

qt

qml

qtquickcontrols