Question

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

我知道用于QtQuickControl自定义的QML Slider和QML SliderStyle类型。根据文档SliderStyle Doc，我应该能够将一个组件分配给tickmarks属性。

我尝试在下面的代码中执行此操作：

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中的默认tickmarks值为：

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 tickmark？

1 个答案: