qt - 如何在 qml 中实现弯曲的滚动视图？

Question

如何在带有标签或的 QML 中获得如下所示的弯曲滚动条/滚动视图的外观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

您可以使用 aFlickable来查看视图。为此，Flickable您附加一个ScrollBar您可以设计的样式。

设计这ScrollBar有点棘手，因为它的一些属性是胡说八道。

-position属性，记录为

该属性保存滚动条的位置，缩放到 0.0 - 1.0。

除非句柄大小为 0，否则永远不会达到1.0。但是，您实际上无法设置句柄的大小。它将自动调整大小。因此，如果您不想拥有一个ScrollBar完全填充宽度的句柄，则需要使用 aItem作为基础并在其中添加视觉对象，这样您就可以再次拥有主权。

总之，它可能看起来像这样：

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