2016-03-08 114 views
2

我試圖自定義一個QML滑塊組件。如何自定義QML滑塊tickmark?

我知道用於QtQuickControl定製的QML Slider和QML SliderStyle類型。並根據文檔SliderStyle Doc我應該能夠將一個組件分配給tickmarks屬性。

我試圖做到這一點在下面的代碼:

import QtQuick 2.3 
import QtQuick.Controls 1.2 
import QtQuick.Controls.Styles 1.2 

Item{ 
    width: slid.width 
    height: slid.height 

property real maxValue: 5.0 
property real minValue: 0.0 
property real step: 1.0 
property real sliderValue: 0 

    Slider { 
     id: slid 
     anchors.centerIn: parent 
     width: 800 
     tickmarksEnabled: true 
     maximumValue: maxValue 
     minimumValue: minValue 
     stepSize: step 
     updateValueWhileDragging: true 
     style: SliderStyle { 
      groove: Image{ 
        source: "images/sliderBG.png" 
        height: 32 
        width: 200 
       } 

      handle: Image{ 
       id: sliderHandle 
       source: "images/sliderButtonUnpressed.png" 
       width: 68 
       height: 68 
      } 

      tickmarks: Text { 
       id: ticks 
       text: "|" 
       font.family: "Myriad Pro" 
       font.pointSize: 30 
       color: "black" 
       y: parent.y - 60 
      } 
     } 

    } 
} 

但只有每當我試圖用我的滑塊,儘管多個滑塊步驟是顯示一個對勾標記。

我試圖避免必須從頭開始編寫QML組件,因爲只有tickmarks。也就是說,在分配標記的方式上有什麼不對嗎?還是有另一種我可以嘗試自定義的QML風格?或者其他解決方案?

在此先感謝,傢伙

回答

1

默認刻度線值QML滑塊是:

property Component tickmarks: Repeater { 
    id: repeater 
    model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue)/control.stepSize : 0 
    Rectangle { 
     color: "#777" 
     width: 1 ; height: 3 
     y: repeater.height 
     x: styleData.handleWidth/2 + index * ((repeater.width - styleData.handleWidth)/(repeater.count-1)) 
    } 
} 

嘗試使用在你的Text組件中繼

+0

謝謝,它的工作原理就像一個魅力。我想我對文檔感到困惑,並沒有指出讀者實際顯示所有的標記。可能唯一的跡象是標籤'tickmarkS'。 –

+2

@WaldezJunior這個補丁改進了文檔:https://codereview.qt-project.org/#/c/151746/ - 一般來說,可以隨時在bugreports.qt.io上建議改進。 – Mitch

+2

GJ @Mitch我記得我一直在努力瞭解如何使用tickmarks。謝謝上帝的來源總是有幫助。 :) – BaCaRoZzo