如何在qml中實現彎曲的scrollview？

Question

如何在QML中使用Label或TextArea獲得曲線滾動條/滾動視圖的外觀？

基本上這個應用程序是不是觸摸應用。 環境，Linux中的Qt 5.7.0。

Answer 1

您可以使用Controls.2的PathInterpolator。下面的例子是一些Slider修改，你可以通過它爲您的需求：

import QtQuick 2.9 
import QtQuick.Controls 2.2 

ApplicationWindow { 
    id: mainWindow 
    visible: true 
    width: 400 
    height: 400 

    Path { 
     id: myPath 
     startX: 0; startY: 20 

     PathCurve { x: 100; y: 40 } 
     PathCurve { x: 200; y: 10 } 
     PathCurve { x: 300; y: 40 } 
    } 

    Slider { 
     id: control 
     width: 300 
     height: 50 
     anchors.centerIn: parent 
     background: Rectangle { 
      anchors.fill: parent 
      color: "orange" 
      Canvas { 
       anchors.fill: parent 
       contextType: "2d" 
       onPaint: { 
        context.strokeStyle = "MediumPurple"; 
        context.path = myPath; 
        context.stroke(); 
       } 
      } 
      PathInterpolator { 
       id: motionPath 
       path: myPath 
       progress: control.visualPosition 
      } 
     } 
     handle: Rectangle { 
      width: 30 
      height: 30 
      radius: 15 
      color: "DodgerBlue" 
      x: motionPath.x - 15 
      y: motionPath.y - 15 
     } 
    } 
} 

Answer 2

可以使用Flickable有你的看法。對此Flickable您可以編輯您可以設計的ScrollBar。

風格這ScrollBar是有點棘手，因爲它的一些屬性是胡說八道。

的position -property，如

這個屬性保存的滾動條的位置，縮放到0.0，其是記錄 - 1.0。

將永遠不會達到1.0除非，句柄大小爲0.您雖然沒有真正能夠設置句柄的大小。它會自動調整大小。所以如果你不想要一個完全填充ScrollBar的寬度的句柄，你需要使用一個Item作爲基礎，並在其中添加一個視覺效果，這樣你就擁有了主權。

總之，它可能是這樣的：

Flickable { 
    anchors.fill: parent 

    contentWidth: width 
    contentHeight: mainWindow.height * 10 

    Rectangle { 
     width: 640 
     height: mainWindow.height * 10 
     gradient: Gradient { 
      GradientStop { color: 'orchid'; position: 0 } 
      GradientStop { color: 'orange'; position: 1 } 
     } 
    } 

    ScrollBar.vertical: ScrollBar { 
     id: scrollBar 
     width: 50 
     contentItem: Item { 
      // This will deal with the bullshit of the position. Imperfect, as I do not consider any margins/paddings 
      property real normalizedPosition: scrollBar.position * (scrollBar.height/(scrollBar.height - height)) 
      Rectangle { 
       // Draw the curve by defining a function for x in dependance of the position. 
       x: Math.sin(Math.PI * parent.normalizedPosition) * 40 
       width: 10 
       height: parent.height // I use the default height, so it 
             // really goes from top to bottom. 
             // A smaller height means, you should 
             // also alter the y value to have a 
             // more natural behavior. 
       radius: 5 
       color: 'green' 
       Text { 
        text: parent.parent.normalizedPosition 
       } 
      } 
     } 
    } 
}