如何使用 Slider 显示不规则步长的值列表？

Question

我正在尝试在 QML 中显示带有滑块的值列表。这些值具有不规则的步长，即 [10, 20, 30, 50, 75, 100]。我将如何使用 QML 滑块（由于设计限制必须是滑块）来执行此操作？遗憾的是，Slider 没有模型属性，所以我不能那样做。当然，我可以从头开始创建自己的自定义滑块，但如果有更简单的方法，为什么要重新发明轮子？

Answer 1

解决方案

设置滑块的范围和步长，例如：

from: 0; to: 5; stepSize: 1

使用 JS 函数将滑块值转换为您需要的任何值，例如：

function hash(x) {
    var table = [10, 20, 30, 50, 75, 100];

    return table[x];
}

注意：对于复杂的转换，考虑从 C++ 后端调用 class 的方法。

例子

这是我为您编写的一个简单示例，用于演示建议的解决方案：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12

ApplicationWindow {
    width: 640; height: 480
    visible: true
    title: qsTr("QML Slider Values")

    function hash(x) {
        var table = [10, 20, 30, 50, 75, 100];

        return table[x];
    }

    ColumnLayout {
        anchors.centerIn: parent

        Slider {
            id: slider

            from: 0; to: 5; stepSize: 1
        }

        Text {
            text: hash(slider.value)
            Layout.alignment: Layout.Center
        }
    }
}

编辑：

受@fallerd 的启发，我重写了 ColumnLayout 部分，使其更现代一些：

ColumnLayout {
    anchors.centerIn: parent

    Slider {
        id: slider

        property var hashTable: [10, 20, 30, 50, 75, 100];
        readonly property int hashedValue: (() => hashTable[value])();

        from: 0; to: hashTable.length - 1; stepSize: 1
    }

    Text {
        text: slider.hashedValue
        Layout.alignment: Layout.Center
    }
}

如何使用 Slider 显示不规则步长的值列表？

How to display a list of values with irregular step size with Slider?

qt

controls

qml

解决方案

例子

编辑：