开始和结束时带有文本的 QML 滑块刻度线

Question

如何实现这样的目标。细文本和粗文本是否必须作为标签位于滑块外部，还是可以作为刻度线的一部分？

Answer 1

它们似乎不能成为刻度线的一部分，但您可以使用单独的文本标签轻松实现：

 Slider {
    id: slide
    width: 200
  }

  Text {
    text: "THIN"
    anchors.top: slide.bottom
    anchors.left: slide.left
  }
  Text {
    text: "THICK"
    anchors.top: slide.bottom
    anchors.right: slide.right
  }

Answer 2

这可以通过样式轻松完成。我建议您查看 $QTHOME/qml/QtQuick/Controls[/Styles/Base] 中的 QML controls/styles 源代码，以了解 QML 控件的默认样式。

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4


Window {
    id: rootWindow
    visible: true
    height: 800
    width: 800

    Rectangle {
        width: 350
        height: 100
        color: "#555"
        anchors.centerIn: parent
        Slider {
            anchors.centerIn: parent
            minimumValue: 1
            maximumValue: 5
            stepSize: 1
            tickmarksEnabled: true
            width: 300
            style: SliderStyle {
                handle: Rectangle {
                    width: 18
                    height: 30
                    border.width: 2
                    border.color: "#555"
                    color: "#CCC"
                    radius: 5
                }
                groove: Rectangle {
                    height: 15
                    width: parent.width
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#CCC"
                }
                tickmarks: Repeater {
                    id: repeater
                    model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0

                    Item {
                        Text {
                            y: repeater.height + 5
                            width : repeater.width / repeater.count
                            x: width * index
                            height: 30
                            color: "#CCC"
                            font.pixelSize: 20
                            text: getText()
                            horizontalAlignment: getAlign()

                            function getText() {
                                if(index === 0) return "THIN"
                                else if(index === repeater.count - 1) return "THICK"
                                else return "";
                            }
                            function getAlign() {
                                if(index === "0") return Text.AlignLeft
                                else if(index === repeater.count - 1) return Text.AlignRight
                                else return Text.AlignHCenter;
                            }
                        }
                        Rectangle {
                            color: "#CCC"
                            width: 2 ; height: 5
                            y: repeater.height
                            x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
                        }
                    }
                }
            }
        }
    }
}

该示例充满了过多且毫无价值的代码，但这有助于理解。

开始和结束时带有文本的 QML 滑块刻度线

QML slider tickmark with text at start and end

qt

qml

qqmlcomponent