QML滑塊刻度標記，文本在開始和結束處

Question

如何實現類似這樣的內容。 文字應該薄而厚，必須放在滑塊外面作爲標籤，還是可以作爲標記的一部分？

Answer 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)) 
         } 
        } 
       } 
      } 
     } 
    } 
} 

這個例子充滿了過多和毫無價值的代碼，但這對理解很有幫助。

Answer 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 
    }