如何在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 
       } 
      } 
     } 
    } 
}