Как вы можете отобразить галочки на объекте QML RangeSlider?

Question

Я хотел бы создать RangeSlider в QML, который также имеет галочки с указанным размером шага. Это возможно с компонентом Slider, но мне не удалось адаптировать его к RangeSlider. Конечно, я мог бы достичь очень хакерского решения, поместив изображение с галочками чуть ниже слайдера, но это негибкий и неадаптивный обходной путь, которого я хотел бы избежать. Должен ли я написать свой собственный компонент QML только для этого?

Answer 1

Да, вы должны сами реализовать тики. Вот краткий пример:

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    RangeSlider {
        id: rangeSlider
        first.value: 0.25
        second.value: 0.75

        readonly property int tickWidth: 1

        Item {
            id: rowLayout
            parent: rangeSlider.background
            width: parent.width
            height: 8
            anchors.top: parent.bottom
            anchors.topMargin: 12

            property int spacing: 5

            Repeater {
                model: rangeSlider.background.width / (parent.spacing + rangeSlider.tickWidth) + 1
                delegate: Rectangle {
                    x: index * (rowLayout.spacing + rangeSlider.tickWidth)
                    y: parent.height - height
                    implicitWidth: major ? rangeSlider.tickWidth + 1 : rangeSlider.tickWidth
                    implicitHeight: major ? 8 : 6
                    color: "#444"

                    readonly property bool major: index % 5 == 0
                }
            }
        }
    }
}

При запуске со стилем Материал выглядит следующим образом: