2013-05-03 81 views
0

詢問Flickable.contentY的界限的正確方法是什麼?我需要一個滾動條。QML中的Flickable.contentY的界限

實驗我發現

offsetY <= contentY <= offsetY + contentHeight - height 

其中OFFSETY可以作爲

var offsetY = contentY-Math.round(visibleArea.yPosition*contentHeight) 

OFFSETY是在應用程序的啓動和零除非似乎是Flickable調整爲常數計算。

該公式一般適用,但可能應該有專門的功能。

+0

爲什麼你需要這個?我在QML中做了幾個滾動條,我們只需要在visibleArea內... – TheBootroo 2013-05-28 11:44:55

回答

4

我輕鬆地做了滾動條無偏移:

// ScrollBar.qml 
import QtQuick 2.0 

Rectangle { 
    id: scrollbar; 
    color: "#3C3C3C"; 
    visible: (flicker.visibleArea.heightRatio < 1.0); 
    property Flickable flicker : null; 
    width: 20; 
    anchors { 
     top: flicker.top; 
     right: flicker.right; 
     bottom: flicker.bottom; 
    } 

    Rectangle { 
     id: handle; 
     height: (scrollbar.height * flicker.visibleArea.heightRatio); 
     color: "#5E5E5E"; 
     border { 
      width: 1; 
      color: "white"; 
     } 
     anchors { 
      left: parent.left; 
      right: parent.right; 
     } 

     Binding { // Calculate handle's x/y position based on the content position of the Flickable 
      target: handle; 
      property: "y"; 
      value: (flicker.visibleArea.yPosition * scrollbar.height); 
      when: (!dragger.drag.active); 
     } 
     Binding { // Calculate Flickable content position based on the handle x/y position 
      target: flicker; 
      property: "contentY"; 
      value: (handle.y/scrollbar.height * flicker.contentHeight); 
      when: (dragger.drag.active); 
     } 
     MouseArea { 
      id: dragger; 
      anchors.fill: parent; 
      drag { 
       target: handle; 
       minimumX: handle.x; 
       maximumX: handle.x; 
       minimumY: 0; 
       maximumY: (scrollbar.height - handle.height); 
       axis: Drag.YAxis; 
      } 
     } 
    } 
} 

只要使用這樣的:

Flickable { 
    id: myFlick; 
} 
ScrollBar { 
    flicker: myFlick; 
} 

它可以用鼠標移動,當Flickable滾動自動移動。