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

Posted 2023-02-16

【中文标题】QML 滑块刻度线在开始和结束时带有文本

【英文标题】：QML slider tickmark with text at start and end

【发布时间】：2016-04-04 08:43:11

【问题描述】：

如何实现这样的目标。 文本是否应该在滑块之外作为标签或它们可以是刻度线的一部分？

【参考方案1】：

这可以通过样式轻松完成。我建议您查看$QTHOME/qml/QtQuick/Controls[/Styles/Base] 中的 QML 控件/样式源代码，以了解 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))
                        
                    
                
            
        
    

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

【讨论】：

我没有测试过这段代码，它看起来肯定不是毫无价值的，正是我想要的。 tickmarksEnabled:true 在这里起着重要的作用，这在 qt 文档中的任何地方都没有提到。新方法谢谢。

【参考方案2】：

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

 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